From 0cb1fad59341152a4d9ef6b012c12d241603f167 Mon Sep 17 00:00:00 2001
From: sveng93 <svenvanginkel@icloud.com>
Date: Mon, 2 Mar 2026 11:46:55 +0100
Subject: [PATCH 1/2] feat: add container count

---
 .../components/containers-table/containers-table.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/internal/site/src/components/containers-table/containers-table.tsx b/internal/site/src/components/containers-table/containers-table.tsx
index 773d478df..f89ba91c1 100644
--- a/internal/site/src/components/containers-table/containers-table.tsx
+++ b/internal/site/src/components/containers-table/containers-table.tsx
@@ -146,6 +146,9 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 	const rows = table.getRowModel().rows
 	const visibleColumns = table.getVisibleLeafColumns()
 
+	const runningCount = data?.filter((c) => c.status.startsWith("Up")).length ?? 0
+	const totalCount = data?.length ?? 0
+
 	return (
 		<Card className="p-6 @container w-full">
 			<CardHeader className="p-0 mb-4">
@@ -154,8 +157,13 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 						<CardTitle className="mb-2">
 							<Trans>All Containers</Trans>
 						</CardTitle>
-						<CardDescription className="flex">
+						<CardDescription className="flex gap-3">
 							<Trans>Click on a container to view more information.</Trans>
+							{data && (
+								<span>
+									{runningCount} / {totalCount} <Trans>running</Trans>
+								</span>
+							)}
 						</CardDescription>
 					</div>
 					<div className="relative ms-auto w-full max-w-full md:w-64">

From f2b580e9025c161d0c3f7c95b17f6adaac8549fc Mon Sep 17 00:00:00 2001
From: sveng93 <svenvanginkel@icloud.com>
Date: Mon, 2 Mar 2026 11:53:00 +0100
Subject: [PATCH 2/2] feat: make it a badge chore: rename total to containers

---
 .../components/containers-table/containers-table.tsx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/internal/site/src/components/containers-table/containers-table.tsx b/internal/site/src/components/containers-table/containers-table.tsx
index f89ba91c1..d99a10c90 100644
--- a/internal/site/src/components/containers-table/containers-table.tsx
+++ b/internal/site/src/components/containers-table/containers-table.tsx
@@ -19,6 +19,7 @@ import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/compon
 import { pb } from "@/lib/api"
 import type { ContainerRecord } from "@/types"
 import { containerChartCols } from "@/components/containers-table/containers-table-columns"
+import { Badge } from "@/components/ui/badge"
 import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { type ContainerHealth, ContainerHealthLabels } from "@/lib/enums"
 import { cn, useBrowserStorage } from "@/lib/utils"
@@ -146,7 +147,6 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 	const rows = table.getRowModel().rows
 	const visibleColumns = table.getVisibleLeafColumns()
 
-	const runningCount = data?.filter((c) => c.status.startsWith("Up")).length ?? 0
 	const totalCount = data?.length ?? 0
 
 	return (
@@ -157,12 +157,12 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 						<CardTitle className="mb-2">
 							<Trans>All Containers</Trans>
 						</CardTitle>
-						<CardDescription className="flex gap-3">
+						<CardDescription className="flex gap-3 items-center">
 							<Trans>Click on a container to view more information.</Trans>
 							{data && (
-								<span>
-									{runningCount} / {totalCount} <Trans>running</Trans>
-								</span>
+								<Badge variant="outline">
+									<Trans>{totalCount} containers</Trans>
+								</Badge>
 							)}
 						</CardDescription>
 					</div>