From c0da4768bbbb82e545f11c7c61edcbccce40c054 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 7 Dec 2025 00:27:47 +0000
Subject: [PATCH] Metric bar and CPU bar improvements

---
 .../components/Dashboard/EnhancedCPUBar.tsx   | 24 +++++++-----------
 .../src/components/Dashboard/GuestRow.tsx     |  6 ++---
 .../src/components/Dashboard/MetricBar.tsx    | 25 +++++++------------
 .../components/shared/NodeSummaryTable.tsx    | 12 ++++-----
 .../src/components/shared/Sparkline.tsx       |  2 +-
 5 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx b/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx
index 74171f1..be0f95a 100644
--- a/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx
+++ b/frontend-modern/src/components/Dashboard/EnhancedCPUBar.tsx
@@ -47,6 +47,7 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
         <Show
             when={viewMode() === 'sparklines' && props.resourceId}
             fallback={
+                // Progress bar mode - full width, flex centered like stacked bars
                 <div ref={containerRef} class="metric-text w-full h-4 flex items-center justify-center">
                     <div
                         class="relative w-full h-full overflow-hidden bg-gray-200 dark:bg-gray-600 rounded cursor-help"
@@ -112,21 +113,14 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
                 </div>
             }
         >
-            {/* Sparkline mode - scales to fill column width, matching bar mode */}
-            <div class="metric-text w-full h-6 flex items-center justify-center">
-                <div class="flex items-center gap-1.5 w-full">
-                    <div class="flex-1 min-w-0 h-6">
-                        <Sparkline
-                            data={metricHistory()}
-                            metric="cpu"
-                            width={0}
-                            height={24}
-                        />
-                    </div>
-                    <span class="text-[10px] font-medium text-gray-800 dark:text-gray-100 whitespace-nowrap flex-shrink-0 w-[35px] text-right">
-                        {formatPercent(props.usage)}
-                    </span>
-                </div>
+            {/* Sparkline mode - full width, flex centered like stacked bars */}
+            <div class="metric-text w-full h-4 flex items-center justify-center">
+                <Sparkline
+                    data={metricHistory()}
+                    metric="cpu"
+                    width={0}
+                    height={16}
+                />
             </div>
         </Show>
     );
diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index e365397..1ac52a2 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -979,7 +979,7 @@ export function GuestRow(props: GuestRowProps) {
 
       {/* CPU */}
       <Show when={isColVisible('cpu')}>
-        <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
+        <td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
           <Show when={isMobile()}>
             <div class="md:hidden flex justify-center">
               <ResponsiveMetricCell
@@ -1015,7 +1015,7 @@ export function GuestRow(props: GuestRowProps) {
 
       {/* Memory */}
       <Show when={isColVisible('memory')}>
-        <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
+        <td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
           <div title={memoryTooltip() ?? undefined}>
             <Show when={isMobile()}>
               <div class="md:hidden flex justify-center">
@@ -1058,7 +1058,7 @@ export function GuestRow(props: GuestRowProps) {
 
       {/* Disk */}
       <Show when={isColVisible('disk')}>
-        <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
+        <td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
           <Show
             when={hasDiskUsage()}
             fallback={
diff --git a/frontend-modern/src/components/Dashboard/MetricBar.tsx b/frontend-modern/src/components/Dashboard/MetricBar.tsx
index 1ffe638..0e06baf 100644
--- a/frontend-modern/src/components/Dashboard/MetricBar.tsx
+++ b/frontend-modern/src/components/Dashboard/MetricBar.tsx
@@ -102,7 +102,7 @@ export function MetricBar(props: MetricBarProps) {
     <Show
       when={viewMode() === 'sparklines' && props.resourceId}
       fallback={
-        // Progress bar mode - scales to fill column width
+        // Progress bar mode - full width, flex centered like stacked bars
         <div ref={containerRef} class="metric-text w-full h-4 flex items-center justify-center">
           <div class={`relative w-full h-full overflow-hidden bg-gray-200 dark:bg-gray-600 rounded ${props.class || ''}`}>
             <div class={`absolute top-0 left-0 h-full ${progressColorClass()}`} style={{ width: `${width()}%` }} />
@@ -120,21 +120,14 @@ export function MetricBar(props: MetricBarProps) {
         </div>
       }
     >
-      {/* Sparkline mode - scales to fill column width, matching bar mode sizing */}
-      <div class="metric-text w-full h-6 flex items-center justify-center">
-        <div class="flex items-center gap-1.5 w-full">
-          <div class="flex-1 min-w-0 h-6">
-            <Sparkline
-              data={metricHistory()}
-              metric={sparklineMetric()}
-              width={0}
-              height={24}
-            />
-          </div>
-          <span class="text-[10px] font-medium text-gray-800 dark:text-gray-100 whitespace-nowrap flex-shrink-0 w-[35px] text-right">
-            {props.label}
-          </span>
-        </div>
+      {/* Sparkline mode - full width, flex centered like stacked bars */}
+      <div class="metric-text w-full h-4 flex items-center justify-center">
+        <Sparkline
+          data={metricHistory()}
+          metric={sparklineMetric()}
+          width={0}
+          height={16}
+        />
       </div>
     </Show>
   );
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index ec64028..6535edc 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -354,13 +354,13 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
               <th class={thClass} style={{ "min-width": '80px' }} onClick={() => handleSort('uptime')}>
                 Uptime {renderSortIndicator('uptime')}
               </th>
-              <th class={thClass} style={{ "min-width": '140px' }} onClick={() => handleSort('cpu')}>
+              <th class={thClass} style={{ width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('cpu')}>
                 CPU {renderSortIndicator('cpu')}
               </th>
-              <th class={thClass} style={{ "min-width": '140px' }} onClick={() => handleSort('memory')}>
+              <th class={thClass} style={{ width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('memory')}>
                 Memory {renderSortIndicator('memory')}
               </th>
-              <th class={thClass} style={{ "min-width": '140px' }} onClick={() => handleSort('disk')}>
+              <th class={thClass} style={{ width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('disk')}>
                 Disk {renderSortIndicator('disk')}
               </th>
               <Show when={hasAnyTemperatureData()}>
@@ -561,7 +561,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* CPU */}
-                    <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
+                    <td class="px-2 py-1 align-middle" style={{ width: "200px", "min-width": "200px", "max-width": "200px" }}>
                       <Show when={isMobile()}>
                         <div class="md:hidden flex justify-center">
                           <MetricText value={cpuPercentValue} type="cpu" />
@@ -589,7 +589,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* Memory */}
-                    <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
+                    <td class="px-2 py-1 align-middle" style={{ width: "200px", "min-width": "200px", "max-width": "200px" }}>
                       <Show when={isMobile()}>
                         <div class="md:hidden flex justify-center">
                           <MetricText value={memoryPercentValue} type="memory" />
@@ -631,7 +631,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* Disk */}
-                    <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
+                    <td class="px-2 py-1 align-middle" style={{ width: "200px", "min-width": "200px", "max-width": "200px" }}>
                       <ResponsiveMetricCell
                         value={diskPercentValue}
                         type="disk"
diff --git a/frontend-modern/src/components/shared/Sparkline.tsx b/frontend-modern/src/components/shared/Sparkline.tsx
index 54d5697..5a6e538 100644
--- a/frontend-modern/src/components/shared/Sparkline.tsx
+++ b/frontend-modern/src/components/shared/Sparkline.tsx
@@ -41,7 +41,7 @@ export const Sparkline: Component<SparklineProps> = (props) => {
     }
     return props.width || 120;
   };
-  const height = () => props.height || 24;
+  const height = () => props.height || 16;
 
   // Default thresholds based on metric type
   const getDefaultThresholds = () => {