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

Rebalance vSphere hosts top-table column widths

Browse Source 
Same equal-width issue as the other platform overview top tables: 9
columns at ~147px each under table-fixed meant FQDN-style host names
(esxi-01.lab.local) and longer cluster names ("Production Cluster") sat
on the same width as the Datastores and VMs integer-count columns, and
the CPU / Memory bars couldn't show their inline "% (used / total)"
labels.

Set explicit md:w-[...] on every TableHead so the Host column gets 18%
(comfortable for FQDNs), CPU and Memory share 13% each as parallel bar
metrics, Cluster / Datacenter / Power / vCenter take what their text
content needs, and Datastores / VMs trim to fit their headers plus
1-2 digit counts. Memory now shows the full size info ("71% (57.2 GB/
80.0 GB)") at 1440px instead of just the percentage. Mobile widths are
unchanged.
This commit is contained in:
rcourtman
2026-05-20 10:29:14 +01:00
parent 5d3c0a72f7
commit d141819795
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/features/vmware/VsphereHostsTable.tsx
+24 -9
View File
@@ -149,23 +149,38 @@ export const VsphereHostsTable: Component<{
<Table class="min-w-full table-fixed text-xs md:min-w-[960px]">
<TableHeader>
<TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}>
<TableHead class={getPlatformTableHeadClass()}>Host</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
{/*
Desktop widths give the Host FQDN room, balance the CPU
and Memory bars, and trim the Datacenter / Cluster /
Power / vCenter text columns and the Datastores / VMs
integer-count columns to what their content actually
needs. Mobile widths are unchanged.
*/}
<TableHead class={`${getPlatformTableHeadClass()} md:w-[18%]`}>
Host
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[11%]`}>
Datacenter
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[12%]`}>
Cluster
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[9%]`}>
Power
</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>CPU</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>Memory</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[13%]`}>
CPU
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[13%]`}>
Memory
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[9%]`}>
Datastores
</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>VMs</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[5%]`}>
VMs
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[10%]`}>
vCenter
</TableHead>
</TableRow>