fix(stats-items): ensure stats items have consistent widths [C92-215] (#2844)

app/react/components/StatsItem.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+
+import { ContainerStats, CPUStats, MemoryStats, NodeStats } from './StatsItem';
+
+describe('StatsItem', () => {
+  describe('NodeStats', () => {
+    it('renders node count with NODES label', () => {
+      render(<NodeStats value={3} />);
+      expect(screen.getByText('3')).toBeVisible();
+      expect(screen.getByText('NODES')).toBeVisible();
+    });
+  });
+
+  describe('CPUStats', () => {
+    it('renders CPU count with cores label', () => {
+      render(<CPUStats value={8} />);
+      expect(screen.getByText('8')).toBeVisible();
+      expect(screen.getByText('cores')).toBeVisible();
+    });
+  });
+
+  describe('MemoryStats', () => {
+    it('renders memory value with MEMORY label', () => {
+      render(<MemoryStats value="8 GB" />);
+      expect(screen.getByText('8 GB')).toBeVisible();
+      expect(screen.getByText('MEMORY')).toBeVisible();
+    });
+  });
+
+  describe('ContainerStats', () => {
+    it('renders running/total containers with a progress bar', () => {
+      render(<ContainerStats total={5} running={3} stopped={2} />);
+      expect(screen.getByText('3')).toBeVisible();
+      expect(screen.getByText('/ 5')).toBeVisible();
+      expect(screen.getByRole('progressbar')).toBeVisible();
+    });
+
+    it('renders a progress bar when total is zero', () => {
+      render(<ContainerStats total={0} running={0} stopped={0} />);
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+  });
+});

app/react/components/StatsItem.tsx

@@ -49,7 +49,9 @@ export function NodeStats({ value }: StatsProps) {
 export function CPUStats({ value }: StatsProps) {
   return (
     <StatsItem icon={Cpu} title="CPUS">
-      <span className="text-left font-bold leading-none">{value}</span>
+      <span className="min-w-[2ch] text-right font-bold tabular-nums leading-none">
+        {value}
+      </span>
       <span className="align-baseline text-xs leading-none">cores</span>
     </StatsItem>
   );
@@ -82,14 +84,12 @@ export function ContainerStats({
           <span className="text-base font-bold leading-none">{running}</span>
           <span> / {actualTotal}</span>
         </div>
-        {actualTotal > 0 && (
-          <progress
-            className="h-[4px] w-auto rounded bg-gray-4 th-dark:bg-white/10"
-            value={running}
-            max={actualTotal}
-            aria-label={`${running} of ${actualTotal} containers running`}
-          />
-        )}
+        <progress
+          className="h-[4px] w-auto rounded bg-gray-4 th-dark:bg-white/10"
+          value={running}
+          max={Math.max(actualTotal, 1)}
+          aria-label={`${running} of ${actualTotal} containers running`}
+        />
       </div>
     </StatsItem>
   );