jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-04-04 20:11:50 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

feat: add tooltip to system name in systems table for better accessibility (#1640)

Browse Source
This commit is contained in:
Fahleen Arif
2026-01-17 03:43:29 +05:00
committed by GitHub
parent acaa9381fe
commit b59fcc26e5
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
internal/site/src/components/systems-table/systems-table-columns.tsx
View File

@@ -129,7 +129,9 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
const { name, id } = info.row.original const { name, id } = info.row.original
const longestName = useStore($longestSystemNameLen) const longestName = useStore($longestSystemNameLen)
return ( return (
<> <Tooltip>
<TooltipTrigger asChild>
<div className="relative">
<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1"> <span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
<IndicatorDot system={info.row.original} /> <IndicatorDot system={info.row.original} />
{/* NOTE: change to 1 ch if switching to monospace font */} {/* NOTE: change to 1 ch if switching to monospace font */}
@@ -142,7 +144,12 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
className="inset-0 absolute size-full" className="inset-0 absolute size-full"
aria-label={name} aria-label={name}
></Link> ></Link>
</> </div>
</TooltipTrigger>
<TooltipContent>
<p>{name}</p>
</TooltipContent>
</Tooltip>
) )
}, },
header: sortableHeader, header: sortableHeader,