From 00cce0ba75bf5f5d4e4593dc9cf2fe94c4fa1594 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 29 Nov 2025 21:31:44 +0000
Subject: [PATCH] Use left-aligned headers consistently in Docker table

---
 .../src/components/Docker/DockerUnifiedTable.tsx   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index cd31c61f1..d3bdb4c21 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -1278,7 +1278,7 @@ const DockerContainerRow: Component<{
         <For each={DOCKER_COLUMNS}>
           {(column) => (
             <td
-              class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'cpu' || column.id === 'memory' ? 'text-center' : ''}`}
+              class="py-0.5 align-middle whitespace-nowrap"
               style={{ "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined }}
             >
               {renderCell(column)}
@@ -1983,7 +1983,7 @@ const DockerServiceRow: Component<{
         <For each={DOCKER_COLUMNS}>
           {(column) => (
             <td
-              class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'cpu' || column.id === 'memory' ? 'text-center' : ''}`}
+              class="py-0.5 align-middle whitespace-nowrap"
               style={{ "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined }}
             >
               {renderCell(column)}
@@ -2012,8 +2012,8 @@ const DockerServiceRow: Component<{
                       <th class="py-1 px-2 text-left font-medium w-[80px]">Type</th>
                       <th class="py-1 px-2 text-left font-medium">Node</th>
                       <th class="py-1 px-2 text-left font-medium">State</th>
-                      <th class="py-1 px-2 text-center font-medium w-[120px]">CPU</th>
-                      <th class="py-1 px-2 text-center font-medium w-[140px]">Memory</th>
+                      <th class="py-1 px-2 text-left font-medium w-[120px]">CPU</th>
+                      <th class="py-1 px-2 text-left font-medium w-[140px]">Memory</th>
                       <th class="py-1 px-2 text-left font-medium">Updated</th>
                     </tr>
                   </thead>
@@ -2077,7 +2077,7 @@ const DockerServiceRow: Component<{
                                 {task.currentState || task.desiredState || 'Unknown'}
                               </span>
                             </td>
-                            <td class="py-1 px-2 w-[120px] text-center">
+                            <td class="py-1 px-2 w-[120px]">
                               <Show when={cpu > 0} fallback={<span class="text-gray-400">—</span>}>
                                 <MetricBar
                                   value={Math.min(100, cpu)}
@@ -2087,7 +2087,7 @@ const DockerServiceRow: Component<{
                                 />
                               </Show>
                             </td>
-                            <td class="py-1 px-2 w-[140px] text-center">
+                            <td class="py-1 px-2 w-[140px]">
                               <Show when={mem > 0} fallback={<span class="text-gray-400">—</span>}>
                                 <MetricBar
                                   value={Math.min(100, mem)}
@@ -2509,7 +2509,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                       const isResource = col.id === 'resource';
                       return (
                         <th
-                          class={`${isResource ? 'pl-4 sm:pl-5 lg:pl-6 pr-2' : 'px-2'} py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 ${col.id === 'cpu' || col.id === 'memory' ? 'text-center' : 'text-left'} font-medium whitespace-nowrap`}
+                          class={`${isResource ? 'pl-4 sm:pl-5 lg:pl-6 pr-2' : 'px-2'} py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-left font-medium whitespace-nowrap`}
                           style={{ "min-width": col.id === 'cpu' || col.id === 'memory' ? '140px' : undefined }}
                           onClick={() => colSortKey && handleSort(colSortKey)}
                           onKeyDown={(e) => e.key === 'Enter' && colSortKey && handleSort(colSortKey)}