feat: improve progress bar responsiveness for narrow screens

- Modified createProgressTextBarHTML to support responsive text display
- Added simpleText parameter to show only percentage on mobile devices
- Progress bars now show full details on screens ≥640px, only percentage on <640px
- Updated all progress bar implementations (dashboard, nodes, storage, PBS)
- Added responsive utility classes to Tailwind safelist
- Prevents text stacking/overlap issues on narrow devices

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: rcourtman

src/public/js/ui/dashboard.js

@@ -712,7 +712,7 @@ PulseApp.ui.dashboard = (() => {
         const cpuPercent = Math.round(guest.cpu);
         const cpuTooltipText = `${cpuPercent}% ${guest.cpus ? `(${(guest.cpu * guest.cpus / 100).toFixed(1)}/${guest.cpus} cores)` : ''}`;
         const cpuColorClass = PulseApp.utils.getUsageColor(cpuPercent, 'cpu');
-        const progressBar = PulseApp.utils.createProgressTextBarHTML(cpuPercent, cpuTooltipText, cpuColorClass);
+        const progressBar = PulseApp.utils.createProgressTextBarHTML(cpuPercent, cpuTooltipText, cpuColorClass, `${cpuPercent}%`);
 
         // Create both text and chart versions
         const guestId = guest.uniqueId;
@@ -732,7 +732,7 @@ PulseApp.ui.dashboard = (() => {
             memoryTooltipText += ` (Host: ${PulseApp.utils.formatBytes(guest.rawHostMemory)})`;
         }
         const memColorClass = PulseApp.utils.getUsageColor(memoryPercent, 'memory');
-        const progressBar = PulseApp.utils.createProgressTextBarHTML(memoryPercent, memoryTooltipText, memColorClass);
+        const progressBar = PulseApp.utils.createProgressTextBarHTML(memoryPercent, memoryTooltipText, memColorClass, `${memoryPercent}%`);
 
         // Create both text and chart versions
         const guestId = guest.uniqueId;
@@ -750,7 +750,7 @@ PulseApp.ui.dashboard = (() => {
             const diskPercent = guest.disk;
             const diskTooltipText = guest.diskTotal ? `${PulseApp.utils.formatBytes(guest.diskCurrent)} / ${PulseApp.utils.formatBytes(guest.diskTotal)} (${diskPercent}%)` : `${diskPercent}%`;
             const diskColorClass = PulseApp.utils.getUsageColor(diskPercent, 'disk');
-            const progressBar = PulseApp.utils.createProgressTextBarHTML(diskPercent, diskTooltipText, diskColorClass);
+            const progressBar = PulseApp.utils.createProgressTextBarHTML(diskPercent, diskTooltipText, diskColorClass, `${diskPercent}%`);
 
             // Create both text and chart versions
             const guestId = guest.uniqueId;

src/public/js/ui/nodes.js

@@ -6,7 +6,7 @@ PulseApp.ui.nodes = (() => {
         const cpuPercent = node.cpu ? (node.cpu * 100) : 0;
         const cpuColorClass = PulseApp.utils.getUsageColor(cpuPercent, 'cpu');
         const cpuTooltipText = `${cpuPercent.toFixed(1)}%${node.maxcpu && node.maxcpu > 0 ? ` (${(node.cpu * node.maxcpu).toFixed(1)}/${node.maxcpu} cores)` : ''}`;
-        return PulseApp.utils.createProgressTextBarHTML(cpuPercent, cpuTooltipText, cpuColorClass);
+        return PulseApp.utils.createProgressTextBarHTML(cpuPercent, cpuTooltipText, cpuColorClass, `${cpuPercent.toFixed(0)}%`);
     }
 
     function _createNodeMemoryBarHtml(node) {
@@ -15,7 +15,7 @@ PulseApp.ui.nodes = (() => {
         const memPercent = (memUsed && memTotal > 0) ? (memUsed / memTotal * 100) : 0;
         const memColorClass = PulseApp.utils.getUsageColor(memPercent, 'memory');
         const memTooltipText = `${PulseApp.utils.formatBytes(memUsed)} / ${PulseApp.utils.formatBytes(memTotal)} (${memPercent.toFixed(1)}%)`;
-        return PulseApp.utils.createProgressTextBarHTML(memPercent, memTooltipText, memColorClass);
+        return PulseApp.utils.createProgressTextBarHTML(memPercent, memTooltipText, memColorClass, `${memPercent.toFixed(0)}%`);
     }
 
     function _createNodeDiskBarHtml(node) {
@@ -24,7 +24,7 @@ PulseApp.ui.nodes = (() => {
         const diskPercent = (diskUsed && diskTotal > 0) ? (diskUsed / diskTotal * 100) : 0;
         const diskColorClass = PulseApp.utils.getUsageColor(diskPercent, 'disk');
         const diskTooltipText = `${PulseApp.utils.formatBytes(diskUsed)} / ${PulseApp.utils.formatBytes(diskTotal)} (${diskPercent.toFixed(1)}%)`;
-        return PulseApp.utils.createProgressTextBarHTML(diskPercent, diskTooltipText, diskColorClass);
+        return PulseApp.utils.createProgressTextBarHTML(diskPercent, diskTooltipText, diskColorClass, `${diskPercent.toFixed(0)}%`);
     }
 
     // Create a dedicated function for rendering a single node row

src/public/js/ui/pbs.js

@@ -547,7 +547,7 @@ PulseApp.ui.pbs = (() => {
                     usageCell.className = `${CSS_CLASSES.P1_PX2} ${CSS_CLASSES.WHITESPACE_NOWRAP}`;
                     usageCell.style.minWidth = '150px';
                     if (totalBytes > 0) {
-                        usageCell.innerHTML = PulseApp.utils.createProgressTextBarHTML(usagePercent, usageText, usageColor);
+                        usageCell.innerHTML = PulseApp.utils.createProgressTextBarHTML(usagePercent, usageText, usageColor, `${usagePercent}%`);
                     } else {
                         usageCell.textContent = 'N/A';
                     }

src/public/js/ui/storage.js

@@ -198,7 +198,7 @@ PulseApp.ui.storage = (() => {
         const usagePercent = store.total > 0 ? (store.used / store.total) * 100 : 0;
         const usageTooltipText = `${PulseApp.utils.formatBytes(store.used)} / ${PulseApp.utils.formatBytes(store.total)} (${usagePercent.toFixed(1)}%)`;
         const usageColorClass = PulseApp.utils.getUsageColor(usagePercent);
-        const usageBarHTML = PulseApp.utils.createProgressTextBarHTML(usagePercent, usageTooltipText, usageColorClass);
+        const usageBarHTML = PulseApp.utils.createProgressTextBarHTML(usagePercent, usageTooltipText, usageColorClass, `${usagePercent.toFixed(0)}%`);
 
         const sharedIconTooltip = store.shared === 1 ? 'Shared across cluster' : 'Local to node';
         const isDarkMode = document.documentElement.classList.contains('dark');

src/public/js/utils.js

@@ -37,7 +37,7 @@ PulseApp.utils = (() => {
         }
     }
 
-    function createProgressTextBarHTML(percentage, text, color) {
+    function createProgressTextBarHTML(percentage, text, color, simpleText = null) {
         // Always use a neutral background regardless of the progress color
         const bgColorClass = 'bg-gray-200 dark:bg-gray-700';
 
@@ -47,10 +47,16 @@ PulseApp.utils = (() => {
             green: 'bg-green-500/50 dark:bg-green-500/50'
         }[color] || 'bg-gray-500/50'; // Fallback progress color with opacity
 
+        // Use simpleText for narrow screens if provided, otherwise just show percentage
+        const mobileText = simpleText || `${percentage}%`;
+
         return `
             <div class="relative w-full h-3.5 rounded overflow-hidden ${bgColorClass}">
                 <div class="absolute top-0 left-0 h-full ${progressColorClass}" style="width: ${percentage}%;"></div>
-                <span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">${text}</span>
+                <span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">
+                    <span class="hidden sm:inline truncate px-1">${text}</span>
+                    <span class="inline sm:hidden">${mobileText}</span>
+                </span>
             </div>
         `;
     }

src/tailwind.config.js

@@ -17,6 +17,12 @@ module.exports = {
     'xl:grid-cols-1', 'xl:grid-cols-2', 'xl:grid-cols-3', 'xl:grid-cols-4',
     'vm-icon',
     'ct-icon',
+    'hidden',
+    'inline',
+    'sm:hidden',
+    'sm:inline',
+    'truncate',
+    'px-1',
   ],
   theme: {
     extend: {},