From 151423ac638a0f288efb4c2ad981ce7a19e066dd Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Thu, 24 Sep 2026 19:13:26 -0400
Subject: [PATCH] fix(ui): size monitors system column by systems in the table

Base the network monitors system column width on the longest name among
systems that have monitors in the table, rather than all systems.
---
 .../network-monitors-columns.tsx              |  4 ++-
 .../network-monitors-table.tsx                | 26 ++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/internal/site/src/components/network-monitors-table/network-monitors-columns.tsx b/internal/site/src/components/network-monitors-table/network-monitors-columns.tsx
index b6cccb24..d3bf4751 100644
--- a/internal/site/src/components/network-monitors-table/network-monitors-columns.tsx
+++ b/internal/site/src/components/network-monitors-table/network-monitors-columns.tsx
@@ -31,7 +31,8 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Plural, Trans } from "@lingui/react/macro"
-import { $allSystemsById, $longestSystemName } from "@/lib/stores"
+import { $allSystemsById } from "@/lib/stores"
+import type { ReadableAtom } from "nanostores"
 import { useStore } from "@nanostores/react"
 import { SystemStatus } from "@/lib/enums"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -71,6 +72,7 @@ const isMuted = (record: NetworkMonitorRecord, systemRecord: SystemRecord | unde
 
 export function getMonitorColumns(
 	longestTarget = "",
+	$longestSystemName: ReadableAtom<string>,
 	{
 		onEdit,
 		onDelete,
diff --git a/internal/site/src/components/network-monitors-table/network-monitors-table.tsx b/internal/site/src/components/network-monitors-table/network-monitors-table.tsx
index ccfed80d..50a46a9c 100644
--- a/internal/site/src/components/network-monitors-table/network-monitors-table.tsx
+++ b/internal/site/src/components/network-monitors-table/network-monitors-table.tsx
@@ -1,6 +1,6 @@
 import { getCertDaysLeft, getCertExpiryLevel, getMonitorTarget } from "@/lib/network-monitor-utils"
 import { t } from "@lingui/core/macro"
-import { Plural, Trans } from "@lingui/react/macro"
+import { Trans } from "@lingui/react/macro"
 import {
 	type ColumnFiltersState,
 	flexRender,
@@ -158,6 +158,26 @@ export default function NetworkMonitorsTableNew({
 		return longestTarget
 	}, [monitors, textMeasureVersion])
 
+	// longest name among systems that have monitors in this table (skipped for single-system view).
+	// Held in a store because memoized rows don't re-render when column definitions change.
+	const $longestSystemName = useMemo(() => atom(""), [])
+	useEffect(() => {
+		if (systemId) {
+			return
+		}
+		const systemIds = new Set(monitors.map((m) => m.system))
+		return $allSystemsById.subscribe((systems) => {
+			let longest = ""
+			for (const id of systemIds) {
+				const name = systems[id]?.name ?? ""
+				if (isVisuallyLonger(name, longest)) {
+					longest = name
+				}
+			}
+			$longestSystemName.set(longest)
+		})
+	}, [monitors, systemId, textMeasureVersion, $longestSystemName])
+
 	const runMonitorBatch = useCallback(
 		async (ids: string[], enqueue: (batch: ReturnType<typeof pb.createBatch>, id: string) => void) => {
 			let batch = pb.createBatch()
@@ -257,7 +277,7 @@ export default function NetworkMonitorsTableNew({
 	)
 
 	const columns = useMemo(() => {
-		let columns = getMonitorColumns(longestTarget, {
+		let columns = getMonitorColumns(longestTarget, $longestSystemName, {
 			onEdit: setEditingMonitor,
 			onDelete: handleDeleteRequest,
 			onSetEnabled: handleSetEnabled,
@@ -265,7 +285,7 @@ export default function NetworkMonitorsTableNew({
 		columns = systemId ? columns.filter((col) => col.id !== "system") : columns
 		columns = canManageMonitors ? columns : columns.filter((col) => col.id !== "actions")
 		return columns
-	}, [canManageMonitors, handleDeleteRequest, handleSetEnabled, systemId, longestTarget])
+	}, [canManageMonitors, handleDeleteRequest, handleSetEnabled, systemId, longestTarget, $longestSystemName])
 
 	const table = useReactTable({
 		data: monitors,