diff --git a/src/public/index.html b/src/public/index.html
index fe917ac20..314401b5d 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -354,13 +354,7 @@
-
-
-
-
-
-
diff --git a/src/public/js/state.js b/src/public/js/state.js
index 51485d48c..267b5dda7 100644
--- a/src/public/js/state.js
+++ b/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();
}
};
})();
diff --git a/src/public/js/ui/nodes.js b/src/public/js/ui/nodes.js
index aec2ba619..f0d9385a7 100644
--- a/src/public/js/ui/nodes.js
+++ b/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;
diff --git a/src/tailwind.config.js b/src/tailwind.config.js
index a0b81b6a3..8711b1e2d 100644
--- a/src/tailwind.config.js
+++ b/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',
],