Fix: Node card layout and various updates

Author: rcourtman

src/public/index.html

@@ -354,13 +354,7 @@
       </div>
     </div>
     <div id="pbs" class="tab-content hidden bg-white dark:bg-gray-800 p-4 border border-t-0 border-gray-300 dark:border-gray-700 rounded-b-lg shadow-sm">
-      <!-- Sub-tab navigation -->
-      <div id="pbs-sub-tabs-nav" class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
-        <!-- Sub-tab buttons will be dynamically inserted here by JavaScript -->
-      </div>
-      <!-- Sub-tab content panels -->
-      <div id="pbs-sub-tabs-content" class="space-y-6">
-        <!-- Content for each PBS instance will be dynamically inserted here -->
+      <div id="pbs-instances-container" class="space-y-6">
         <p id="pbs-loading-message" class="text-gray-500 dark:text-gray-400">Loading PBS data...</p>
       </div>
     </div>

src/public/js/state.js

@@ -2,7 +2,6 @@ PulseApp.state = (() => {
     const savedSortState = JSON.parse(localStorage.getItem('pulseSortState')) || {};
     const savedFilterState = JSON.parse(localStorage.getItem('pulseFilterState')) || {};
     const savedThresholdState = JSON.parse(localStorage.getItem('pulseThresholdState')) || {};
-    const savedPbsShowDetails = JSON.parse(localStorage.getItem('pulsePbsShowDetails')) || {};
 
     let internalState = {
         nodesData: [],
@@ -36,8 +35,7 @@ PulseApp.state = (() => {
         },
         activeLogSessions: {},
         thresholdLogEntries: [],
-        activeLoggingThresholds: null,
-        pbsShowDetails: savedPbsShowDetails
+        activeLoggingThresholds: null
     };
 
     // Initialize thresholdState by merging saved state with defaults
@@ -83,10 +81,6 @@ PulseApp.state = (() => {
         localStorage.setItem('pulseSortState', JSON.stringify(stateToSave));
     }
 
-    function savePbsShowDetailsState() {
-        localStorage.setItem('pulsePbsShowDetails', JSON.stringify(internalState.pbsShowDetails));
-    }
-
     return {
         get: (key) => internalState[key],
         set: (key, value) => {
@@ -140,16 +134,6 @@ PulseApp.state = (() => {
         },
         clearDashboardHistoryEntry: (guestId) => {
             delete internalState.dashboardHistory[guestId];
-        },
-        getPbShowDetailsState: (instanceId, defaultValue) => {
-            if (typeof internalState.pbsShowDetails[instanceId] === 'boolean') {
-                return internalState.pbsShowDetails[instanceId];
-            }
-            return defaultValue;
-        },
-        setPbShowDetailsState: (instanceId, value) => {
-            internalState.pbsShowDetails[instanceId] = !!value;
-            savePbsShowDetailsState();
         }
     };
 })();

src/public/js/ui/nodes.js

@@ -143,10 +143,18 @@ PulseApp.ui.nodes = (() => {
         function calculateOptimalColumns(numItems, defaultCols) {
             if (numItems <= 0) return defaultCols; // No items, use default or let it be empty
             if (defaultCols <= 1) return 1; // Cannot reduce further, or already 1
-            // If numItems is less than or equal to defaultCols, it will fit in one row, so use defaultCols.
-            if (numItems <= defaultCols) return defaultCols; 
-            // If numItems % defaultCols leaves a single orphan, reduce columns by 1.
+            // If numItems is less than or equal to defaultCols, use numItems as the column count.
+            if (numItems <= defaultCols) return numItems; 
+            
+            // Now numItems > defaultCols (multiple rows expected)
+            // Avoid a single orphan, but don't reduce to 1 column if defaultCols is 2.
             if (numItems % defaultCols === 1) {
+                if (defaultCols === 2) {
+                    // If default is 2 cols (sm), and we have an odd number of items (e.g., 3, 5),
+                    // use 2 columns to avoid stacking. (Results in 2 side-by-side, then 1 or more).
+                    return defaultCols; 
+                }
+                // For other defaultCols (>=3), reducing by 1 to avoid an orphan is fine.
                 return Math.max(1, defaultCols - 1); // Ensure at least 1 column
             }
             return defaultCols;

src/tailwind.config.js

@@ -10,6 +10,11 @@ module.exports = {
     {
       pattern: /^(bg|text)-(red|yellow|green|blue)-(100|200|300|400|500|600|700|800|900)(\/50)?$/,
     },
+    'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4',
+    'sm:grid-cols-1', 'sm:grid-cols-2', 'sm:grid-cols-3', 'sm:grid-cols-4',
+    'md:grid-cols-1', 'md:grid-cols-2', 'md:grid-cols-3', 'md:grid-cols-4',
+    'lg:grid-cols-1', 'lg:grid-cols-2', 'lg:grid-cols-3', 'lg:grid-cols-4',
+    'xl:grid-cols-1', 'xl:grid-cols-2', 'xl:grid-cols-3', 'xl:grid-cols-4',
     'vm-icon',
     'ct-icon',
   ],