gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-10-23 12:15:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebalance TrueNAS systems top-table column widths

Browse Source 
Same equal-width issue as the Docker and Proxmox top tables: table-fixed
across 11 columns with no per-column desktop widths gave every column the
same ~120px slice. That squeezed the Version field (where
"TrueNAS-SCALE-24.10.2" is a normal 21-char value) and clipped the size
labels on the CPU / Memory / Storage bars, while the four integer-count
columns (Pools / Datasets / Disks / Apps) sat on 120px each holding
single-digit values.

Set explicit md:w-[...] on every TableHead so the three bar columns get
balanced shares (CPU 11%, Memory 12%, Storage 13%), Version and System
each get 14% for their longer mono-spaced and hostname content, and the
four count columns trim to what their headers need (Pools/Disks/Apps
~5-6%, Datasets 7% for the longer header). Memory and Storage bars now
show their full "% (used / total)" labels at 1440px instead of hiding
the size portion. Mobile widths are unchanged.
This commit is contained in:
rcourtman
2026-05-20 10:27:42 +01:00
parent 2e8bcad909
commit 5d3c0a72f7
1 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/features/truenas/TrueNASSystemsTable.tsx
+26 -11
View File
@@ -166,29 +166,44 @@ export const TrueNASSystemsTable: Component<{
<Table class="min-w-full table-fixed text-xs md:min-w-[1040px]">
<TableHeader>
<TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}>
<TableHead class={getPlatformTableHeadClass()}>System</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
{/*
Desktop widths balance the bar-metric columns (CPU /
Memory / Storage) against the short integer-count columns
(Pools / Datasets / Disks / Apps) and give Version the
room it needs for full "TrueNAS-SCALE-24.10.2"-style
labels. Mobile widths are unchanged.
*/}
<TableHead class={`${getPlatformTableHeadClass()} md:w-[14%]`}>
System
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[14%]`}>
Version
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[6%]`}>
Uptime
</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>CPU</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>Memory</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>Storage</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[11%]`}>
CPU
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[12%]`}>
Memory
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[13%]`}>
Storage
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[6%]`}>
Temp
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[6%]`}>
Pools
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[7%]`}>
Datasets
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[5%]`}>
Disks
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[5%]`}>
Apps
</TableHead>
</TableRow>