From 383c4e21f3fcfc25fc144e5dc3a02b5dd5125e67 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 14 Dec 2025 22:05:38 +0000
Subject: [PATCH] fix(docker): truncate long image names in container table

Fixes #825

Long Docker image names (like Immich postgres containers) were expanding
the entire table row, requiring horizontal scrolling to see CPU/Memory.

Changed the image cell to use:
- Inline style max-width (more reliable in table layouts)
- Block span with truncate class
- overflow-hidden on parent container

Images now truncate with ellipsis at 200px, with full name in tooltip.
---
 .../src/components/Docker/DockerUnifiedTable.tsx      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index a1de9e756..1dec7b150 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -1290,10 +1290,15 @@ const DockerContainerRow: Component<{
       case 'image':
         return (
           <div
-            class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 truncate max-w-[200px]"
-            title={container.image || undefined}
+            class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 overflow-hidden"
+            style={{ "max-width": "200px" }}
           >
-            {container.image || '—'}
+            <span
+              class="block truncate"
+              title={container.image || undefined}
+            >
+              {container.image || '—'}
+            </span>
           </div>
         );
       case 'status':