From 46fa7c581e50fcd567c7aec7a5d5d1120dd4e830 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Fri, 25 Sep 2026 18:53:04 -0400
Subject: [PATCH] use tooltip for all systems table cell

---
 .../systems-table/systems-table-columns.tsx   | 54 ++++++++++++-------
 1 file changed, 35 insertions(+), 19 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 d4a6abb53..1c004d8b4 100644
--- a/internal/site/src/components/systems-table/systems-table-columns.tsx
+++ b/internal/site/src/components/systems-table/systems-table-columns.tsx
@@ -39,7 +39,7 @@ import {
 } from "@/lib/utils"
 import { batteryStateTranslations } from "@/lib/i18n"
 import { connectedWiFi, strongestWiFi, strongestWiFiSignal } from "@/lib/wifi"
-import type { SystemRecord } from "@/types"
+import type { SystemRecord, WiFi } from "@/types"
 import { SystemDialog } from "../add-system"
 import AlertButton from "../alerts/alert-button"
 import { $router, Link } from "../router"
@@ -363,25 +363,41 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 					return null
 				}
 				const displayedConnections = viewMode === "table" ? [strongest] : connections
-				const title = connections
-					.map(([id, wifi]) => `${id}${wifi.s ? ` (${wifi.s})` : ""}: ${wifi.r === undefined ? "—" : `${wifi.r} dBm`}`)
-					.join("\n")
+				const signal = (wifi: WiFi) => (wifi.r === undefined ? "—" : `${wifi.r} dBm`)
 				return (
-					<Link
-						href={getPagePath($router, "system", { id: info.row.original.id })}
-						tabIndex={-1}
-						className="flex flex-col gap-0.5 min-w-0 py-1 relative z-10"
-						title={title}
-					>
-						{displayedConnections.map(([id, wifi]) => (
-							<span key={id} className="tabular-nums whitespace-nowrap">
-								{wifi.r === undefined ? "—" : `${wifi.r} dBm`}
-							</span>
-						))}
-						{viewMode === "table" && connections.length > 1 && (
-							<span className="text-xs text-muted-foreground">+{connections.length - 1}</span>
-						)}
-					</Link>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Link
+								href={getPagePath($router, "system", { id: info.row.original.id })}
+								tabIndex={-1}
+								className="flex flex-col gap-0.5 min-w-0 py-1 relative z-10"
+							>
+								{displayedConnections.map(([id, wifi]) => (
+									<span key={id} className="tabular-nums whitespace-nowrap">
+										{signal(wifi)}
+									</span>
+								))}
+								{viewMode === "table" && connections.length > 1 && (
+									<span className="text-xs text-muted-foreground">+{connections.length - 1}</span>
+								)}
+							</Link>
+						</TooltipTrigger>
+						<TooltipContent side="right" className="max-w-xs pb-2">
+							<div className="grid gap-1">
+								{connections.map(([id, wifi]) => (
+									<div key={id} className="grid gap-0.5">
+										<div className="text-[0.65rem] max-w-40 text-muted-foreground uppercase tracking-wide truncate">
+											{id}
+										</div>
+										<div className="flex gap-2 items-center tabular-nums text-xs">
+											<span className="shrink-0">{signal(wifi)}</span>
+											{wifi.s && <span className="truncate max-w-40">{wifi.s}</span>}
+										</div>
+									</div>
+								))}
+							</div>
+						</TooltipContent>
+					</Tooltip>
 				)
 			},
 		},