From b59fcc26e52914e30ea3d3a23430532cca6116a7 Mon Sep 17 00:00:00 2001
From: Fahleen Arif <106329502+Fahleen1@users.noreply.github.com>
Date: Sat, 17 Jan 2026 03:43:29 +0500
Subject: [PATCH] feat: add tooltip to system name in systems table for better
 accessibility (#1640)

---
 .../systems-table/systems-table-columns.tsx   | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 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 d3e28c44..e63b6c15 100644
--- a/internal/site/src/components/systems-table/systems-table-columns.tsx
+++ b/internal/site/src/components/systems-table/systems-table-columns.tsx
@@ -129,20 +129,27 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 				const { name, id } = info.row.original
 				const longestName = useStore($longestSystemNameLen)
 				return (
-					<>
-						<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
-							<IndicatorDot system={info.row.original} />
-							{/* NOTE: change to 1 ch if switching to monospace font */}
-							<span className="truncate" style={{ width: `${longestName / 1.1}ch` }}>
-								{name}
-							</span>
-						</span>
-						<Link
-							href={getPagePath($router, "system", { id })}
-							className="inset-0 absolute size-full"
-							aria-label={name}
-						></Link>
-					</>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<div className="relative">
+								<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
+									<IndicatorDot system={info.row.original} />
+									{/* NOTE: change to 1 ch if switching to monospace font */}
+									<span className="truncate" style={{ width: `${longestName / 1.1}ch` }}>
+										{name}
+									</span>
+								</span>
+								<Link
+									href={getPagePath($router, "system", { id })}
+									className="inset-0 absolute size-full"
+									aria-label={name}
+								></Link>
+							</div>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>{name}</p>
+						</TooltipContent>
+					</Tooltip>
 				)
 			},
 			header: sortableHeader,