jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-03-23 14:06:18 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

ui: conditional title attribute and better CJK truncation

Browse Source 
- Adds CJK support for system name truncation
- Change tooltip to title attribute and show only if system name is truncated
This commit is contained in:
henrygd
2026-01-16 18:17:45 -05:00
parent b59fcc26e5
commit 031abbfcb3
3 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -128,28 +128,36 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
cell: (info) => {
const { name, id } = info.row.original
const longestName = useStore($longestSystemNameLen)
const linkUrl = getPagePath($router, "system", { id })
return (
<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>
<>
<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
<IndicatorDot system={info.row.original} />
<Link
href={linkUrl}
tabIndex={-1}
className="truncate z-10 relative"
style={{ width: `${longestName / 1.05}ch` }}
onMouseEnter={(e) => {
// set title on hover if text is truncated to show full name
const a = e.currentTarget
if (a.scrollWidth > a.clientWidth) {
a.title = name
} else {
a.removeAttribute("title")
}
}}
>
{name}
</Link>
</span>
<Link
href={linkUrl}
className="inset-0 absolute size-full"
aria-label={name}
></Link>
</>
)
},
header: sortableHeader,
@@ -446,9 +454,9 @@ function TableCellWithMeter(info: CellContext<SystemRecord, unknown>) {
const meterClass = cn(
"h-full",
(info.row.original.status !== SystemStatus.Up && STATUS_COLORS.paused) ||
(threshold === MeterState.Good && STATUS_COLORS.up) ||
(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
STATUS_COLORS.down
(threshold === MeterState.Good && STATUS_COLORS.up) ||
(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
STATUS_COLORS.down
)
return (
<div className="flex gap-2 items-center tabular-nums tracking-tight w-full">
@@ -560,7 +568,7 @@ export function IndicatorDot({ system, className }: { system: SystemRecord; clas
return (
<span
className={cn("shrink-0 size-2 rounded-full", className)}
// style={{ marginBottom: "-1px" }}
// style={{ marginBottom: "-1px" }}
/>
)
}