Constrain Proxmox disk sub-rows to a tighter column span

Previous version spanned from Disk all the way to Cluster, which gave
the per-disk bar far more room than it needs and visually fragmented
the table grid. Cap the colspan to Disk plus two right neighbours so
the sub-row sits in a sensible ~400px region, and fix the bar at w-20
instead of letting it stretch. Cts/Cluster columns now stay aligned
with the host row above.
This commit is contained in:
rcourtman
2026-05-17 15:23:57 +01:00
parent 95758b6efd
commit c0896fbc94
@@ -165,7 +165,11 @@ const ProxmoxHostDiskSubRow: Component<{
const diskIdx = () => subProps.visibleColumns.findIndex((c) => c.id === 'disk');
const leadingColumns = () => subProps.visibleColumns.slice(0, diskIdx());
const trailingSpan = () => subProps.visibleColumns.length - diskIdx();
const remainingAfterDisk = () => subProps.visibleColumns.length - diskIdx();
// Span the Disk column plus up to two right neighbours so the row has room
// for label/bar/percent/size without bleeding all the way to Cluster.
const detailSpan = () => Math.min(remainingAfterDisk(), 3);
const trailingColumns = () => subProps.visibleColumns.slice(diskIdx() + detailSpan());
return (
<TableRow class="text-[11px] bg-surface-alt/30">
@@ -176,12 +180,15 @@ const ProxmoxHostDiskSubRow: Component<{
</For>
<TableCell
class={`${getPlatformTableCellClass('left')} text-muted`}
colspan={trailingSpan()}
colspan={detailSpan()}
>
<div class="flex items-center gap-3 min-w-0" title={`${fullPath()}: ${formatPercent(percent())} (${usedLabel()} / ${totalLabel()})`}>
<div
class="flex items-center gap-2 min-w-0"
title={`${fullPath()}: ${formatPercent(percent())} (${usedLabel()} / ${totalLabel()})`}
>
<span class="text-muted/70 select-none"></span>
<span class="font-mono text-base-content truncate max-w-[140px]">{label()}</span>
<div class="relative flex-1 min-w-[60px] h-2 rounded bg-surface-hover overflow-hidden">
<span class="font-mono text-base-content truncate max-w-[80px]">{label()}</span>
<div class="relative h-2 w-20 shrink-0 rounded bg-surface-hover overflow-hidden">
<div
class="absolute inset-y-0 left-0 rounded"
style={{ width: `${fillPercent()}%`, background: color() }}
@@ -195,6 +202,11 @@ const ProxmoxHostDiskSubRow: Component<{
</span>
</div>
</TableCell>
<For each={trailingColumns()}>
{(column) => (
<TableCell class={getPlatformTableCellClass(column.align)}>&nbsp;</TableCell>
)}
</For>
</TableRow>
);
};