From 661ca22eab43c604cc5cd1308a125d1e539be274 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 25 Nov 2025 22:31:59 +0000
Subject: [PATCH] fix: adapt NodeSummaryTable column widths per tab context

Count columns now have appropriate widths based on their header text:
- Dashboard: VMs/CTs use compact 40-50px (short labels)
- Storage: Storage/Disks use wider 50-70px and 45-60px
- Backups: Backups uses wider 50-70px

This fixes the broken appearance on Storage and Backups tabs where
longer header text didn't fit in the narrow fixed-width columns.
---
 .../src/components/shared/NodeSummaryTable.tsx   | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index fb57dd6..9638fd8 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -139,6 +139,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
     header: string;
     key: CountSortKey;
     icon: Component<{ class?: string }>;
+    minWidth?: string;
+    maxWidth?: string;
   }
 
   const [sortKey, setSortKey] = createSignal<SortKey>('default');
@@ -148,16 +150,16 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
     switch (props.currentTab) {
       case 'dashboard':
         return [
-          { header: 'VMs', key: 'vmCount', icon: VMIcon },
-          { header: 'CTs', key: 'containerCount', icon: ContainerIcon },
+          { header: 'VMs', key: 'vmCount', icon: VMIcon, minWidth: '40px', maxWidth: '50px' },
+          { header: 'CTs', key: 'containerCount', icon: ContainerIcon, minWidth: '40px', maxWidth: '50px' },
         ];
       case 'storage':
         return [
-          { header: 'Storage', key: 'storageCount', icon: DiskIcon },
-          { header: 'Disks', key: 'diskCount', icon: DiskIcon },
+          { header: 'Storage', key: 'storageCount', icon: DiskIcon, minWidth: '50px', maxWidth: '70px' },
+          { header: 'Disks', key: 'diskCount', icon: DiskIcon, minWidth: '45px', maxWidth: '60px' },
         ];
       case 'backups':
-        return [{ header: 'Backups', key: 'backupCount', icon: BackupIcon }];
+        return [{ header: 'Backups', key: 'backupCount', icon: BackupIcon, minWidth: '50px', maxWidth: '70px' }];
       default:
         return [];
     }
@@ -186,8 +188,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
         label: cc.header,
         priority: 'essential' as ColumnPriority,
         icon: cc.icon,
-        minWidth: '40px',
-        maxWidth: '50px',
+        minWidth: cc.minWidth || '40px',
+        maxWidth: cc.maxWidth || '50px',
         align: 'center',
       });
     });