From f56093d0f0f55fb3518cc25b21d2e2653bef8e56 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Sat, 18 Oct 2025 18:52:59 -0400
Subject: [PATCH] hide container table if no containers

---
 .../containers-table/containers-table.tsx      | 13 ++++++++-----
 internal/site/src/components/routes/system.tsx | 18 ------------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/internal/site/src/components/containers-table/containers-table.tsx b/internal/site/src/components/containers-table/containers-table.tsx
index b549bfa5..7e20ad7a 100644
--- a/internal/site/src/components/containers-table/containers-table.tsx
+++ b/internal/site/src/components/containers-table/containers-table.tsx
@@ -51,11 +51,12 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 		}
 
 		const fetchData = (lastXMs: number) => {
+			const updated = Date.now() - lastXMs
 			let filter: string
 			if (systemId) {
-				filter = pb.filter("system={:system}", { system: systemId })
+				filter = pb.filter("system={:system} && updated > {:updated}", { system: systemId, updated })
 			} else {
-				filter = pb.filter("updated > {:updated}", { updated: Date.now() - lastXMs })
+				filter = pb.filter("updated > {:updated}", { updated })
 			}
 			pb.collection<ContainerRecord>("containers")
 				.getList(0, 2000, {
@@ -133,6 +134,8 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 	const rows = table.getRowModel().rows
 	const visibleColumns = table.getVisibleLeafColumns()
 
+	if (!rows.length) return null
+
 	return (
 		<Card className="p-6 @container w-full">
 			<CardHeader className="p-0 mb-4">
@@ -370,7 +373,7 @@ function ContainerSheet({ sheetOpen, setSheetOpen, activeContainer }: { sheetOpe
 								<MaximizeIcon className="size-4" />
 							</Button>
 						</div>
-						<div className={cn("grow h-[calc(50dvh-2rem)] w-full overflow-auto p-3 rounded-md bg-gh-dark text-sm", !infoDisplay && "animate-pulse")}>
+						<div className={cn("grow h-[calc(50dvh-4rem)] w-full overflow-auto p-3 rounded-md bg-gh-dark text-sm", !infoDisplay && "animate-pulse")}>
 							<div dangerouslySetInnerHTML={{ __html: infoDisplay }} />
 						</div>
 
@@ -461,8 +464,8 @@ function LogsFullscreenDialog({ open, onOpenChange, logsDisplay, containerName,
 					}}
 					className="absolute top-3 right-11 opacity-60 hover:opacity-100 p-1"
 					disabled={isRefreshing}
-					title={t`Refresh logs`}
-					aria-label={t`Refresh logs`}
+					title={t`Refresh`}
+					aria-label={t`Refresh`}
 				>
 					<RefreshCwIcon
 						className={`size-4 transition-transform duration-300 ${isRefreshing ? 'animate-spin' : ''}`}
diff --git a/internal/site/src/components/routes/system.tsx b/internal/site/src/components/routes/system.tsx
index c21d03b1..7af460be 100644
--- a/internal/site/src/components/routes/system.tsx
+++ b/internal/site/src/components/routes/system.tsx
@@ -172,7 +172,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	const [containerData, setContainerData] = useState([] as ChartData["containerData"])
 	const netCardRef = useRef<HTMLDivElement>(null)
 	const persistChartTime = useRef(false)
-	const [bottomSpacing, setBottomSpacing] = useState(0)
 	const [chartLoading, setChartLoading] = useState(true)
 	const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h
 	const userSettings = $userSettings.get()
@@ -397,20 +396,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 		}[]
 	}, [system, t])
 
-	/** Space for tooltip if more than 12 containers */
-	useEffect(() => {
-		if (!netCardRef.current || !containerData.length) {
-			setBottomSpacing(0)
-			return
-		}
-		const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40
-		const wrapperEl = chartWrapRef.current as HTMLDivElement
-		const wrapperRect = wrapperEl.getBoundingClientRect()
-		const chartRect = netCardRef.current.getBoundingClientRect()
-		const distanceToBottom = wrapperRect.bottom - chartRect.bottom
-		setBottomSpacing(tooltipHeight - distanceToBottom)
-	}, [containerData])
-
 	// keyboard navigation between systems
 	useEffect(() => {
 		if (!systems.length) {
@@ -993,9 +978,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					<LazyContainersTable systemId={id} />
 				)}
 			</div>
-
-			{/* add space for tooltip if more than 12 containers */}
-			{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
 		</>
 	)
 })