From 2ea75caa2fb275a2b6d41dc113377e07d143dd12 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Tue, 26 Aug 2025 19:36:37 +0000
Subject: [PATCH] fix: use 100% table width with fixed layout to eliminate dead
 space

- Tables now use 100% width with table-layout: fixed
- Last column (Uptime) no longer has fixed width, takes remaining space
- Eliminates dead space while maintaining fixed column sizes
- Tables still have min-width to prevent collapse
---
 .../src/components/shared/PBSNodeTable.tsx            |  4 ++--
 .../src/components/shared/PVENodeTable.tsx            | 11 +++--------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend-modern/src/components/shared/PBSNodeTable.tsx b/frontend-modern/src/components/shared/PBSNodeTable.tsx
index 906f51cd6..114b9cc16 100644
--- a/frontend-modern/src/components/shared/PBSNodeTable.tsx
+++ b/frontend-modern/src/components/shared/PBSNodeTable.tsx
@@ -86,7 +86,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
   return (
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
       <div class="overflow-x-auto" style="overflow-x: auto;">
-        <table style="width: 1000px; table-layout: fixed;">
+        <table style="table-layout: fixed; min-width: 100%; width: 100%;">
           <thead>
             <tr class="border-b border-gray-200 dark:border-gray-700">
               <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 200px; white-space: nowrap;">
@@ -110,7 +110,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
               <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 180px; white-space: nowrap;">
                 Storage Used
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 100px; white-space: nowrap;">
+              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="white-space: nowrap;">
                 Uptime
               </th>
             </tr>
diff --git a/frontend-modern/src/components/shared/PVENodeTable.tsx b/frontend-modern/src/components/shared/PVENodeTable.tsx
index 6ea2f4066..ef8d9084b 100644
--- a/frontend-modern/src/components/shared/PVENodeTable.tsx
+++ b/frontend-modern/src/components/shared/PVENodeTable.tsx
@@ -146,18 +146,13 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
     return nodes && nodes.length > 0;
   });
   
-  // Calculate table width based on number of count columns
-  const tableWidth = createMemo(() => {
-    const countColumns = getCountHeaders().length;
-    // Base: 200 + 80 + 100 + (countColumns * 80) + 180 + 180 + 180 + 100
-    return 1020 + (countColumns * 80);
-  });
+  // Table uses 100% width with fixed layout
   
   return (
     <Show when={showTable()}>
       <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
         <div class="overflow-x-auto" style="overflow-x: auto;">
-          <table style={`width: ${tableWidth()}px; table-layout: fixed;`}>
+          <table style="table-layout: fixed; min-width: 100%; width: 100%;">
           <thead>
             <tr class="border-b border-gray-200 dark:border-gray-700">
               <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 200px; white-space: nowrap;">
@@ -185,7 +180,7 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
               <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 180px; white-space: nowrap;">
                 Storage
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 100px; white-space: nowrap;">
+              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="white-space: nowrap;">
                 Uptime
               </th>
             </tr>