From e380ab691798b077781ccb7ae9881e1206fb13de Mon Sep 17 00:00:00 2001
From: Sven van Ginkel <svenvanginkel@icloud.com>
Date: Fri, 14 Aug 2026 01:18:43 +0200
Subject: [PATCH] fix(ui): prevent usage bars from overflowing card border in
 grid view (#2064)

---
 .../src/components/systems-table/systems-table-columns.tsx    | 2 +-
 internal/site/src/components/systems-table/systems-table.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/internal/site/src/components/systems-table/systems-table-columns.tsx b/internal/site/src/components/systems-table/systems-table-columns.tsx
index 432191fa..c19b17e8 100644
--- a/internal/site/src/components/systems-table/systems-table-columns.tsx
+++ b/internal/site/src/components/systems-table/systems-table-columns.tsx
@@ -470,7 +470,7 @@ function TableCellWithMeter(info: CellContext<SystemRecord, unknown>) {
 			STATUS_COLORS.down
 	)
 	return (
-		<div className="flex gap-2 items-center tabular-nums tracking-tight w-full">
+		<div className="flex gap-2 items-center tabular-nums tracking-tight w-full min-w-0">
 			<span className="min-w-8 shrink-0">{decimalString(val, val >= 10 ? 1 : 2)}%</span>
 			<span className="flex-1 min-w-8 grid bg-muted h-[1em] rounded-sm overflow-hidden">
 				<span className={meterClass} style={{ width: `${val}%` }}></span>
diff --git a/internal/site/src/components/systems-table/systems-table.tsx b/internal/site/src/components/systems-table/systems-table.tsx
index 6c24c8d1..c3b30afd 100644
--- a/internal/site/src/components/systems-table/systems-table.tsx
+++ b/internal/site/src/components/systems-table/systems-table.tsx
@@ -477,7 +477,7 @@ const SystemCard = memo(
 						</div>
 					</CardHeader>
 					<CardContent className="text-sm px-5 pt-3.5 pb-4">
-						<div className="grid gap-2.5" style={{ gridTemplateColumns: "24px minmax(80px, max-content) 1fr" }}>
+						<div className="grid gap-2.5" style={{ gridTemplateColumns: "24px minmax(80px, max-content) minmax(0, 1fr)" }}>
 							{table.getAllColumns().map((column) => {
 								if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
 								const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
@@ -496,7 +496,7 @@ const SystemCard = memo(
 										<div key={`${column.id}-label`} className="flex items-center text-muted-foreground pr-3">
 											{name()}:
 										</div>
-										<div key={`${column.id}-value`} className="flex items-center">
+										<div key={`${column.id}-value`} className="flex items-center min-w-0">
 											{flexRender(cell.column.columnDef.cell, cell.getContext())}
 										</div>
 									</>