fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 01:39:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix alignment for metrics (#1109)

Browse Source
This commit is contained in:
Sven van Ginkel
2025-08-29 20:00:17 +02:00
committed by GitHub
parent 94245a9ba4
commit 7697a12b42
2 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
beszel/site/src/components/systems-table/systems-table-columns.tsx
View File

@@ -326,9 +326,9 @@ function TableCellWithMeter(info: CellContext<SystemRecord, unknown>) {
STATUS_COLORS.down STATUS_COLORS.down
) )
return ( return (
<div className="flex gap-2 items-center tabular-nums tracking-tight"> <div className="flex gap-2 items-center tabular-nums tracking-tight w-full">
<span className="min-w-8">{decimalString(val, val >= 10 ? 1 : 2)}%</span> <span className="min-w-8 shrink-0">{decimalString(val, val >= 10 ? 1 : 2)}%</span>
<span className="grow min-w-8 grid bg-muted h-[1em] rounded-sm overflow-hidden"> <span className="flex-1 min-w-8 grid bg-muted h-[1em] rounded-sm overflow-hidden">
<span className={meterClass} style={{ width: `${val}%` }}></span> <span className={meterClass} style={{ width: `${val}%` }}></span>
</span> </span>
</div> </div>

48
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -385,27 +385,33 @@ const SystemCard = memo(
)} )}
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="grid gap-2.5 text-sm px-5 pt-3.5 pb-4"> <CardContent className="text-sm px-5 pt-3.5 pb-4">
{table.getAllColumns().map((column) => { <div className="grid gap-2.5" style={{ gridTemplateColumns: "24px minmax(80px, max-content) 1fr" }}>
if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null {table.getAllColumns().map((column) => {
const cell = row.getAllCells().find((cell) => cell.column.id === column.id) if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
if (!cell) return null const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
// @ts-ignore if (!cell) return null
const { Icon, name } = column.columnDef as ColumnDef<SystemRecord, unknown> // @ts-ignore
return ( const { Icon, name } = column.columnDef as ColumnDef<SystemRecord, unknown>
<div key={column.id} className="flex items-center gap-3"> return (
{column.id === "lastSeen" ? ( <>
<EyeIcon className="size-4 text-muted-foreground" /> <div key={`${column.id}-icon`} className="flex items-center">
) : ( {column.id === "lastSeen" ? (
Icon && <Icon className="size-4 text-muted-foreground" /> <EyeIcon className="size-4 text-muted-foreground" />
)} ) : (
<div className="flex items-center gap-3 flex-1"> Icon && <Icon className="size-4 text-muted-foreground" />
<span className="text-muted-foreground min-w-16">{name()}:</span> )}
<div className="flex-1">{flexRender(cell.column.columnDef.cell, cell.getContext())}</div> </div>
</div> <div key={`${column.id}-label`} className="flex items-center text-muted-foreground pr-3">
</div> {name()}:
) </div>
})} <div key={`${column.id}-value`} className="flex items-center">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>
</>
)
})}
</div>
</CardContent> </CardContent>
<Link <Link
href={getPagePath($router, "system", { name: row.original.name })} href={getPagePath($router, "system", { name: row.original.name })}