From 715c0bb4516942a06cb0e30925007d346248c8b4 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Thu, 4 Dec 2025 13:29:08 +0000
Subject: [PATCH] fix: Docker table resource column overlap regression

The max-width:0 CSS trick from d3f22f06 caused the resource column
content to overlap with the TYPE badge. Use a proper max-w-[300px]
class instead to constrain long container names while maintaining
proper column spacing.

Related to #810, #789
---
 .../src/components/Docker/DockerUnifiedTable.tsx       | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index 1651f6c..dbc89ac 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -1280,12 +1280,9 @@ const DockerContainerRow: Component<{
         <For each={DOCKER_COLUMNS}>
           {(column) => (
             <td
-              class="py-0.5 align-middle whitespace-nowrap"
+              class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'resource' ? 'max-w-[300px]' : ''}`}
               style={{
                 "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined,
-                // Force resource column to respect truncation for very long names (issue #789)
-                "max-width": column.id === 'resource' ? '0' : undefined,
-                "width": column.id === 'resource' ? '40%' : undefined,
               }}
             >
               {renderCell(column)}
@@ -1990,12 +1987,9 @@ const DockerServiceRow: Component<{
         <For each={DOCKER_COLUMNS}>
           {(column) => (
             <td
-              class="py-0.5 align-middle whitespace-nowrap"
+              class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'resource' ? 'max-w-[300px]' : ''}`}
               style={{
                 "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined,
-                // Force resource column to respect truncation for very long names (issue #789)
-                "max-width": column.id === 'resource' ? '0' : undefined,
-                "width": column.id === 'resource' ? '40%' : undefined,
               }}
             >
               {renderCell(column)}