From 30f1ca0a5f714f2c07488ed7d485971c278954f3 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Mon, 6 Jul 2026 05:17:46 -0400
Subject: [PATCH] fix: default to compact density only for multi-container
 stacks (#1576)

* fix: only default to compact density for multi-container stacks

* fix: update density reset test for single-container detailed default
---
 .../EditorLayout/__tests__/ContainersHealth.test.tsx       | 7 +++----
 .../src/components/EditorLayout/editor-view-blocks.tsx     | 4 +++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/EditorLayout/__tests__/ContainersHealth.test.tsx b/frontend/src/components/EditorLayout/__tests__/ContainersHealth.test.tsx
index df9abc1a..7b95779e 100644
--- a/frontend/src/components/EditorLayout/__tests__/ContainersHealth.test.tsx
+++ b/frontend/src/components/EditorLayout/__tests__/ContainersHealth.test.tsx
@@ -185,7 +185,7 @@ describe('density toggle and summary strip', () => {
     expect(screen.queryByRole('button', { name: 'Detailed view' })).toBeNull();
   });
 
-  it('resets density to compact on remount (key change)', () => {
+  it('resets density to detailed on remount (key change)', () => {
     const { unmount } = render(
       <ContainersHealth
         safeContainers={[makeContainer({ Id: 'a' }), makeContainer({ Id: 'b' })]}
@@ -216,9 +216,8 @@ describe('density toggle and summary strip', () => {
         serviceAction={vi.fn()}
       />,
     );
-    // Density reset to compact; single container hides sparklines,
-    // no density toggle for a single container
-    expect(screen.queryByText('cpu')).toBeNull();
+    // Density reset; single container shows sparklines
+    expect(screen.getByText('cpu')).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Compact view' })).toBeNull();
   });
 });
diff --git a/frontend/src/components/EditorLayout/editor-view-blocks.tsx b/frontend/src/components/EditorLayout/editor-view-blocks.tsx
index e0e21167..43464b7f 100644
--- a/frontend/src/components/EditorLayout/editor-view-blocks.tsx
+++ b/frontend/src/components/EditorLayout/editor-view-blocks.tsx
@@ -361,7 +361,9 @@ export function ContainersHealth({
     const copiedUrlTimerRef = useRef<number | null>(null);
     // Compact mode hides sparkline grids across all containers for a denser
     // list. Detailed mode (default) shows CPU / Mem / Net per container.
-    const [density, setDensity] = useState<'compact' | 'detailed'>('compact');
+    const [density, setDensity] = useState<'compact' | 'detailed'>(
+    safeContainers.length > 1 ? 'compact' : 'detailed',
+);
     useEffect(() => () => {
         if (copiedUrlTimerRef.current !== null) window.clearTimeout(copiedUrlTimerRef.current);
     }, []);