From 4332129ac20d26fd417ac3c18c275ac4b679f765 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 20 May 2026 12:52:57 +0100
Subject: [PATCH] Fix Docker host header clipping

---
 .../src/features/docker/DockerHostsTable.tsx  | 44 ++++++++++++++-----
 .../platformOverviewLayout.guardrails.test.ts |  5 +++
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/frontend-modern/src/features/docker/DockerHostsTable.tsx b/frontend-modern/src/features/docker/DockerHostsTable.tsx
index 6f728911f4..6752d90c2c 100644
--- a/frontend-modern/src/features/docker/DockerHostsTable.tsx
+++ b/frontend-modern/src/features/docker/DockerHostsTable.tsx
@@ -166,36 +166,56 @@ export const DockerHostsTable: Component<{
                     bars aren't squeezed by table-fixed's equal split. Mobile
                     widths (w-[40%], w-[20%]) are unchanged.
                   */}
-                  <TableHead class={`${getPlatformTableHeadClassForKind('name')} w-[40%] md:w-[15%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('name')} w-[40%] md:w-[13%]`}
+                  >
                     Host
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[7%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[7%]`}
+                  >
                     System
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[7%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[7%]`}
+                  >
                     Version
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('numeric-value')} hidden md:table-cell md:w-[9%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('numeric-value')} hidden md:table-cell md:w-[9%]`}
+                  >
                     Containers
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('metric-bar')} w-[20%] md:w-[14%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('metric-bar')} w-[20%] md:w-[14%]`}
+                  >
                     CPU
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('metric-bar')} w-[20%] md:w-[14%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('metric-bar')} w-[20%] md:w-[14%]`}
+                  >
                     <span class="md:hidden">Mem</span>
                     <span class="hidden md:inline">Memory</span>
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('metric-bar')} w-[20%] md:w-[14%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('metric-bar')} w-[20%] md:w-[14%]`}
+                  >
                     Disk
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('numeric-value')} hidden md:table-cell md:w-[6%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('numeric-value')} hidden md:table-cell md:w-[6%]`}
+                  >
                     Uptime
                   </TableHead>
-                  <TableHead class={`${getPlatformTableHeadClassForKind('numeric-value')} hidden md:table-cell md:w-[6%]`}>
+                  <TableHead
+                    class={`${getPlatformTableHeadClassForKind('numeric-value')} hidden md:table-cell md:w-[6%]`}
+                  >
                     Temp
                   </TableHead>
                   <Show when={showSwarmColumn()}>
-                    <TableHead class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[9%]`}>
+                    <TableHead
+                      class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[10%]`}
+                    >
                       Swarm role
                     </TableHead>
                   </Show>
@@ -262,7 +282,9 @@ export const DockerHostsTable: Component<{
                           onKeyDown={handleActivationKey}
                           tabIndex={0}
                         >
-                          <TableCell class={`${getPlatformTableCellClassForKind('name')} w-[40%] md:w-auto`}>
+                          <TableCell
+                            class={`${getPlatformTableCellClassForKind('name')} w-[40%] md:w-auto`}
+                          >
                             <div class="flex min-w-0 items-center gap-2">
                               <StatusDot
                                 size="sm"
diff --git a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
index 79118a1e81..2001495768 100644
--- a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
+++ b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
@@ -132,6 +132,11 @@ describe('platform overview layout guardrails', () => {
     }
   });
 
+  it('keeps Docker host optional Swarm column wide enough for its header', () => {
+    expect(dockerHostsTableSource).toContain('Swarm role');
+    expect(dockerHostsTableSource).toContain('md:w-[10%]');
+  });
+
   it('keeps provider overview pages in the parent-table plus child-inventory stack', () => {
     for (const source of overviewSurfaceSources) {
       expect(source).toContain('<div class="space-y-4">');