From 3f760d9762aaecd0c81b293f21113ecbc78e7103 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Tue, 26 Aug 2025 19:31:11 +0000
Subject: [PATCH] fix: actually fix table layout in PVE and PBS node tables

- Fixed the correct components (PVENodeTable and PBSNodeTable)
- Use inline styles for table-layout: fixed and width: 1100px
- Set explicit column widths with inline styles
- Add white-space: nowrap to prevent text wrapping
- Tables now properly scroll horizontally on narrow screens
---
 .../src/components/shared/PBSNodeTable.tsx    | 32 +++++++++----------
 .../src/components/shared/PVENodeTable.tsx    | 30 ++++++++---------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/frontend-modern/src/components/shared/PBSNodeTable.tsx b/frontend-modern/src/components/shared/PBSNodeTable.tsx
index ef1fafca8..3dc1cc6d9 100644
--- a/frontend-modern/src/components/shared/PBSNodeTable.tsx
+++ b/frontend-modern/src/components/shared/PBSNodeTable.tsx
@@ -85,32 +85,32 @@ 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">
-        <table class="w-full">
+      <div class="overflow-x-auto" style="overflow-x: auto;">
+        <table style="width: 1100px; table-layout: fixed;">
           <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">
+              <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;">
                 PBS Instances
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 80px; white-space: nowrap;">
                 Status
               </th>
-              <th class="px-2 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-2 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 100px; white-space: nowrap;">
                 Datastores
               </th>
-              <th class="px-2 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-2 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 80px; white-space: nowrap;">
                 Backups
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[180px]">
+              <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;">
                 CPU
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[180px]">
+              <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;">
                 Memory
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[180px]">
+              <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">
+              <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;">
                 Uptime
               </th>
             </tr>
@@ -161,8 +161,8 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
                       isClickable && props.onNodeClick(pbs.name);
                     }}
                   >
-                    <td class="px-2 py-0.5">
-                      <div class="flex items-center gap-2">
+                    <td class="px-2 py-0.5" style="white-space: nowrap;">
+                      <div class="flex items-center gap-2" style="white-space: nowrap;">
                         <Show when={hasDatastoresWithNamespaces()}>
                           <button
                             class="expand-button p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
@@ -190,7 +190,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
                           </button>
                         </Show>
                         <span class={`h-2 w-2 rounded-full ${isOnline() ? 'bg-green-500' : 'bg-red-500'}`}></span>
-                        <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                        <span class="text-sm font-medium text-gray-900 dark:text-gray-100" style="white-space: nowrap;">
                           {pbs.name}
                         </span>
                       </div>
@@ -210,7 +210,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
                         {props.backupCounts?.[pbs.name] || 0}
                       </span>
                     </td>
-                    <td class="px-2 py-0.5 w-[180px]">
+                    <td class="px-2 py-0.5" style="width: 180px;">
                       <Show when={isOnline()} fallback={<span class="text-xs text-gray-400">-</span>}>
                         <MetricBar 
                           value={cpuPercent()} 
@@ -219,7 +219,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
                         />
                       </Show>
                     </td>
-                    <td class="px-2 py-0.5 w-[180px]">
+                    <td class="px-2 py-0.5" style="width: 180px;">
                       <Show when={isOnline()} fallback={<span class="text-xs text-gray-400">-</span>}>
                         <MetricBar 
                           value={memPercent()} 
@@ -229,7 +229,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
                         />
                       </Show>
                     </td>
-                    <td class="px-2 py-0.5 w-[180px]">
+                    <td class="px-2 py-0.5" style="width: 180px;">
                       <Show when={isOnline() && totalStorage().total > 0} fallback={<span class="text-xs text-gray-400">-</span>}>
                         <MetricBar 
                           value={totalStorage().percent} 
diff --git a/frontend-modern/src/components/shared/PVENodeTable.tsx b/frontend-modern/src/components/shared/PVENodeTable.tsx
index 69a036c37..1826dbc7a 100644
--- a/frontend-modern/src/components/shared/PVENodeTable.tsx
+++ b/frontend-modern/src/components/shared/PVENodeTable.tsx
@@ -149,36 +149,36 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
   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">
-          <table class="w-full">
+        <div class="overflow-x-auto" style="overflow-x: auto;">
+          <table style="width: 1100px; table-layout: fixed;">
           <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 whitespace-nowrap">
+              <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;">
                 PVE Nodes
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">
+              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 80px; white-space: nowrap;">
                 Status
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">
+              <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;">
                 Cluster
               </th>
               <For each={getCountHeaders()}>
                 {(header) => (
-                  <th class="px-2 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">
+                  <th class="px-2 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 80px; white-space: nowrap;">
                     {header}
                   </th>
                 )}
               </For>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[180px] whitespace-nowrap">
+              <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;">
                 CPU
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[180px] whitespace-nowrap">
+              <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;">
                 Memory
               </th>
-              <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[180px] whitespace-nowrap">
+              <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 whitespace-nowrap">
+              <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;">
                 Uptime
               </th>
             </tr>
@@ -219,8 +219,8 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
                     `}
                     onClick={() => props.onNodeClick(node.name)}
                   >
-                    <td class="px-2 py-0.5">
-                      <div class="flex items-center gap-2 min-w-0">
+                    <td class="px-2 py-0.5" style="white-space: nowrap;">
+                      <div class="flex items-center gap-2" style="white-space: nowrap;">
                         <span class={`h-2 w-2 rounded-full flex-shrink-0 ${isOnline() ? 'bg-green-500' : 'bg-red-500'}`}></span>
                         <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" title={node.name}>{node.name}</span>
                         <Show when={filteredGuestCount() !== null && props.searchTerm && props.searchTerm.trim()}>
@@ -249,7 +249,7 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
                         </td>
                       )}
                     </For>
-                    <td class="px-2 py-0.5 w-[180px]">
+                    <td class="px-2 py-0.5" style="width: 180px;">
                       <Show when={isOnline()} fallback={<span class="text-xs text-gray-400">-</span>}>
                         <MetricBar 
                           value={cpuPercent()} 
@@ -259,7 +259,7 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
                         />
                       </Show>
                     </td>
-                    <td class="px-2 py-0.5 w-[180px]">
+                    <td class="px-2 py-0.5" style="width: 180px;">
                       <Show when={isOnline()} fallback={<span class="text-xs text-gray-400">-</span>}>
                         <MetricBar 
                           value={memPercent()} 
@@ -269,7 +269,7 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
                         />
                       </Show>
                     </td>
-                    <td class="px-2 py-0.5 w-[180px]">
+                    <td class="px-2 py-0.5" style="width: 180px;">
                       <Show when={isOnline()} fallback={<span class="text-xs text-gray-400">-</span>}>
                         <MetricBar 
                           value={storagePercent()}