From 25d82ef9f120020983fbaff38330d2bd6eadad44 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Fri, 29 Aug 2025 22:09:37 +0000
Subject: [PATCH] fix: make metric bars responsive with minimum width
 constraints

- changed fixed widths to minimum widths for table columns
- made MetricBar component expand to fill available space
- maintains minimum width of 120px to prevent text cutoff
- bars now grow on wider screens while staying readable on narrow ones
---
 .../src/components/Backups/UnifiedBackups.tsx        |  6 +++---
 .../src/components/Dashboard/Dashboard.tsx           |  6 +++---
 .../src/components/Dashboard/MetricBar.tsx           |  2 +-
 frontend-modern/src/components/Storage/Storage.tsx   |  4 ++--
 .../src/components/shared/NodeSummaryTable.tsx       | 12 ++++++------
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index 59ed15df1..2e93e405e 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -1006,14 +1006,14 @@ const UnifiedBackups: Component = () => {
                             </span>
                           </div>
                         </td>
-                        <td class="p-0.5 px-1.5 w-[180px]">
+                        <td class="p-0.5 px-1.5 min-w-[180px]">
                           <MetricBar 
                             value={cpuPercent()} 
                             label={`${cpuPercent()}%`}
                             type="cpu"
                           />
                         </td>
-                        <td class="p-0.5 px-1.5 w-[180px]">
+                        <td class="p-0.5 px-1.5 min-w-[180px]">
                           <MetricBar 
                             value={memPercent()} 
                             label={`${memPercent()}%`}
@@ -1021,7 +1021,7 @@ const UnifiedBackups: Component = () => {
                             type="memory"
                           />
                         </td>
-                        <td class="p-0.5 px-1.5 w-[180px]">
+                        <td class="p-0.5 px-1.5 min-w-[180px]">
                           <MetricBar 
                             value={storage.percent} 
                             label={`${storage.percent}%`}
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 690f3485c..2583a7d72 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -561,7 +561,7 @@ export function Dashboard(props: DashboardProps) {
                             </span>
                           </div>
                         </td>
-                        <td class="p-1 px-2 w-[180px]">
+                        <td class="p-1 px-2 min-w-[180px]">
                           <MetricBar 
                             value={cpuPercent()} 
                             label={`${cpuPercent()}%`}
@@ -569,7 +569,7 @@ export function Dashboard(props: DashboardProps) {
                             type="cpu"
                           />
                         </td>
-                        <td class="p-1 px-2 w-[180px]">
+                        <td class="p-1 px-2 min-w-[180px]">
                           <MetricBar 
                             value={memPercent()} 
                             label={`${memPercent()}%`}
@@ -577,7 +577,7 @@ export function Dashboard(props: DashboardProps) {
                             type="memory"
                           />
                         </td>
-                        <td class="p-1 px-2 w-[180px]">
+                        <td class="p-1 px-2 min-w-[180px]">
                           <MetricBar 
                             value={diskPercent()} 
                             label={`${diskPercent()}%`}
diff --git a/frontend-modern/src/components/Dashboard/MetricBar.tsx b/frontend-modern/src/components/Dashboard/MetricBar.tsx
index 7fc95bb8b..844fadcd0 100644
--- a/frontend-modern/src/components/Dashboard/MetricBar.tsx
+++ b/frontend-modern/src/components/Dashboard/MetricBar.tsx
@@ -54,7 +54,7 @@ export function MetricBar(props: MetricBarProps) {
 
   return (
     <div class="metric-text">
-      <div class="relative w-[120px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
+      <div class="relative min-w-[120px] w-full h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
         <div 
           class={`absolute top-0 left-0 h-full ${progressColorClass()}`}
           style={{ width: `${width()}%` }}
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index a879c4713..cef33217f 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -269,7 +269,7 @@ const Storage: Component = () => {
                   <Show when={viewMode() === 'node'}>
                     <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">Shared</th>
                   </Show>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[200px]">Usage</th>
+                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-[200px]">Usage</th>
                   <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">Free</th>
                   <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Total</th>
                 </tr>
@@ -361,7 +361,7 @@ const Storage: Component = () => {
                               </Show>
                               
                               <td class="p-0.5 px-1.5">
-                                <div class="relative w-[200px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
+                                <div class="relative min-w-[200px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
                                   <div 
                                     class={`absolute top-0 left-0 h-full ${getProgressBarColor(usagePercent)}`}
                                     style={{ width: `${usagePercent}%` }}
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index 506d95f66..32d321240 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -106,16 +106,16 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
               <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-1/4">
                 {props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}
               </th>
-              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-20">Status</th>
-              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-24">Uptime</th>
-              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">CPU</th>
-              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">Memory</th>
-              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">
+              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-20">Status</th>
+              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-24">Uptime</th>
+              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-32">CPU</th>
+              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-32">Memory</th>
+              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-32">
                 {props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}
               </th>
               <For each={getCountHeader()}>
                 {(header) => (
-                  <th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-16">{header}</th>
+                  <th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-16">{header}</th>
                 )}
               </For>
             </tr>