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 Docker hosts top-table column widths

Browse Source 
The Docker overview top table was running on table-fixed with no
per-column desktop widths, so all 10 columns rendered at the same ~132px.
That gave CPU / Memory / Disk bars the same allocation as one-digit
badge columns like "Containers" or short-text columns like "System",
and the bars couldn't show their inline "% (size / size)" labels at all.

Set explicit md:w-[...] on every header so the three bar-metric columns
share an equal generous slice (14% each), the Host name column gets
headroom for full hostnames, and the short-content columns (Version,
System, Uptime, Temp, Containers, Swarm role) trim to what their labels
and values actually need. Mobile widths are unchanged.
This commit is contained in:
rcourtman
2026-05-20 09:59:22 +01:00
parent 46f2f459c1
commit a3ba8a1663
1 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/features/docker/DockerHostsTable.tsx
+16 -10
View File
@@ -160,36 +160,42 @@ export const DockerHostsTable: Component<{
<Table class="min-w-full table-fixed text-xs md:min-w-[1080px]">
<TableHeader>
<TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}>
<TableHead class={`${getPlatformTableHeadClass()} w-[40%] md:w-auto`}>
{/*
Desktop widths balance the three bar-metric columns (CPU /
Memory / Disk) against the short-content columns so the
bars aren't squeezed by table-fixed's equal split. Mobile
widths (w-[40%], w-[20%]) are unchanged.
*/}
<TableHead class={`${getPlatformTableHeadClass()} w-[40%] md:w-[15%]`}>
Host
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[7%]`}>
System
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[7%]`}>
Version
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[9%]`}>
Containers
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} w-[20%] md:w-auto`}>
<TableHead class={`${getPlatformTableHeadClass('right')} w-[20%] md:w-[14%]`}>
CPU
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} w-[20%] md:w-auto`}>
<TableHead class={`${getPlatformTableHeadClass('right')} w-[20%] md:w-[14%]`}>
<span class="md:hidden">Mem</span>
<span class="hidden md:inline">Memory</span>
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} w-[20%] md:w-auto`}>
<TableHead class={`${getPlatformTableHeadClass('right')} w-[20%] md:w-[14%]`}>
Disk
</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')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[6%]`}>
Temp
</TableHead>
<Show when={showSwarmColumn()}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[9%]`}>
Swarm role
</TableHead>
</Show>