From c9e1467244a7cfdbb488d681f9247cc65194fc4b Mon Sep 17 00:00:00 2001
From: bernard-portainer <bernard.setz@portainer.io>
Date: Tue, 9 Jun 2026 16:53:17 +1200
Subject: [PATCH] fix(stats-items): ensure stats items have consistent widths
 [C92-215] (#2844)

---
 app/react/components/StatsItem.test.tsx | 43 +++++++++++++++++++++++++
 app/react/components/StatsItem.tsx      | 18 +++++------
 2 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 app/react/components/StatsItem.test.tsx

diff --git a/app/react/components/StatsItem.test.tsx b/app/react/components/StatsItem.test.tsx
new file mode 100644
index 0000000000..254fc8d86c
--- /dev/null
+++ b/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();
+    });
+  });
+});
diff --git a/app/react/components/StatsItem.tsx b/app/react/components/StatsItem.tsx
index d415120041..fdbaefe002 100644
--- a/app/react/components/StatsItem.tsx
+++ b/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>
   );