jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-03-21 21:26:16 +01: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

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

@@ -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,