From a3ba8a1663d82c4ac736e294db904266601adf5a Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 20 May 2026 09:59:22 +0100
Subject: [PATCH] Rebalance Docker hosts top-table column widths

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.
---
 .../src/features/docker/DockerHostsTable.tsx  | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend-modern/src/features/docker/DockerHostsTable.tsx b/frontend-modern/src/features/docker/DockerHostsTable.tsx
index ee27c78c37..4f5e024c77 100644
--- a/frontend-modern/src/features/docker/DockerHostsTable.tsx
+++ b/frontend-modern/src/features/docker/DockerHostsTable.tsx
@@ -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>