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 { name, id } = info.row.original
const longestName = useStore($longestSystemNameLen) const longestName = useStore($longestSystemNameLen)
return ( return (
<> <Tooltip>
<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1"> <TooltipTrigger asChild>
<IndicatorDot system={info.row.original} /> <div className="relative">
{/* NOTE: change to 1 ch if switching to monospace font */} <span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
<span className="truncate" style={{ width: `${longestName / 1.1}ch` }}> <IndicatorDot system={info.row.original} />
{name} {/* NOTE: change to 1 ch if switching to monospace font */}
</span> <span className="truncate" style={{ width: `${longestName / 1.1}ch` }}>
</span> {name}
<Link </span>
href={getPagePath($router, "system", { id })} </span>
className="inset-0 absolute size-full" <Link
aria-label={name} href={getPagePath($router, "system", { id })}
></Link> className="inset-0 absolute size-full"
</> aria-label={name}
></Link>
</div>
</TooltipTrigger>
<TooltipContent>
<p>{name}</p>
</TooltipContent>
</Tooltip>
) )
}, },
header: sortableHeader, header: sortableHeader,