From 4181fd7869ce3668bbdbe3b64539fac2f49a3e0f Mon Sep 17 00:00:00 2001
From: myung03 <matthewyungisworking@gmail.com>
Date: Tue, 14 May 2024 16:05:58 -0700
Subject: [PATCH] fixed size display for locations cards

---
 interface/app/$libraryId/overview/StatCard.tsx | 10 +++++-----
 interface/app/$libraryId/overview/index.tsx    |  4 +++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/interface/app/$libraryId/overview/StatCard.tsx b/interface/app/$libraryId/overview/StatCard.tsx
index d2c546cee..196aaa4d1 100644
--- a/interface/app/$libraryId/overview/StatCard.tsx
+++ b/interface/app/$libraryId/overview/StatCard.tsx
@@ -12,11 +12,12 @@ type StatCardProps = {
 	freeSpace?: string | number[];
 	color: string;
 	connectionType: 'lan' | 'p2p' | 'cloud' | null;
+	devices: boolean;
 };
 
 const Pill = tw.div`px-1.5 py-[1px] rounded text-tiny font-medium text-ink-dull bg-app-box border border-app-line`;
 
-const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
+const StatCard = ({ icon, name, devices, connectionType, ...stats }: StatCardProps) => {
 	const [mounted, setMounted] = useState(false);
 
 	const isDark = useIsDark();
@@ -44,7 +45,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 
 	return (
 		<Card className="flex w-[280px] shrink-0 flex-col  bg-app-box/50 !p-0 ">
-			<div className="flex flex-row items-center gap-5 p-4 px-6">
+			<div className="max-h-28 flex flex-row items-center gap-5 p-4 px-6">
 				{stats.freeSpace && (
 					<CircularProgress
 						radius={40}
@@ -71,12 +72,11 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 					<span className="truncate font-medium">{name}</span>
 					<span className="mt-1 truncate text-tiny text-ink-faint">
 						{freeSpace.value}
-						{freeSpace.unit} {t('free_of')} {totalSpace.value}
-						{totalSpace.unit}
+						{freeSpace.unit} {devices && t('free_of') + " " + totalSpace.value + totalSpace.unit}
 					</span>
 				</div>
 			</div>
-			<div className="flex h-10 flex-row items-center gap-1.5  border-t border-app-line px-2">
+			<div className="flex h-10 flex-row items-center gap-1.5 border-t border-app-line px-2">
 				<Pill className="uppercase">{connectionType || t('local')}</Pill>
 				<div className="grow" />
 				{/* <Button size="icon" variant="outline">
diff --git a/interface/app/$libraryId/overview/index.tsx b/interface/app/$libraryId/overview/index.tsx
index 656b4f86b..8606733d0 100644
--- a/interface/app/$libraryId/overview/index.tsx
+++ b/interface/app/$libraryId/overview/index.tsx
@@ -3,6 +3,7 @@ import { useBridgeQuery, useLibraryQuery } from '@sd/client';
 import { useLocale, useOperatingSystem } from '~/hooks';
 import { useRouteTitle } from '~/hooks/useRouteTitle';
 import { hardwareModelToIcon } from '~/util/hardware';
+import { Resizable } from '@sd/ui';
 
 import { SearchContextProvider, useSearchFromSearchParams } from '../search';
 import SearchBar from '../search/SearchBar';
@@ -75,7 +76,6 @@ export const Component = () => {
 				/>
 				<div className="mt-4 flex flex-col gap-3 pt-3">
 					<OverviewSection>
-						<LibraryStatistics />
 					</OverviewSection>
 					<OverviewSection>
 						<FileKindStatistics />
@@ -88,6 +88,7 @@ export const Component = () => {
 								totalSpace={
 									stats.data?.statistics?.total_local_bytes_capacity || '0'
 								}
+								devices={true}
 								freeSpace={stats.data?.statistics?.total_local_bytes_free || '0'}
 								color="#0362FF"
 								connectionType={null}
@@ -151,6 +152,7 @@ export const Component = () => {
 									totalSpace={item.size_in_bytes || [0]}
 									color="#0362FF"
 									connectionType={null}
+									devices={false}
 								/>
 							</Link>
 						))}