diff --git a/ui/src/components/SidebarShell.test.tsx b/ui/src/components/SidebarShell.test.tsx
index edfb77b67fb..b423f15cf13 100644
--- a/ui/src/components/SidebarShell.test.tsx
+++ b/ui/src/components/SidebarShell.test.tsx
@@ -147,6 +147,23 @@ describe("SidebarShell", () => {
     expect(handle()).toBeNull();
   });
 
+  it("hides all sidebar width when closed, even if pinned collapsed", () => {
+    window.localStorage.setItem("test.sidebar.width", "320");
+
+    act(() => {
+      root.render(
+        <SidebarShell open={false} collapsed resizable storageKey="test.sidebar.width">
+          <div>Sidebar</div>
+        </SidebarShell>,
+      );
+    });
+
+    expect(spacer().style.width).toBe("0px");
+    expect(panel().style.width).toBe("0px");
+    expect(panel().getAttribute("data-sidebar-overlay")).toBeNull();
+    expect(handle()).toBeNull();
+  });
+
   it("overlays content while peeking without expanding the reserved spacer", () => {
     window.localStorage.setItem("test.sidebar.width", "300");
 
diff --git a/ui/src/components/SidebarShell.tsx b/ui/src/components/SidebarShell.tsx
index 8625ced1c23..5d706761606 100644
--- a/ui/src/components/SidebarShell.tsx
+++ b/ui/src/components/SidebarShell.tsx
@@ -114,8 +114,8 @@ export function SidebarShell({
 
   // Unified width function (plan §5): one code path for every pinned state.
   const expandedWidth = open ? width : 0;
-  const reservedWidth = collapsed ? SIDEBAR_RAIL_WIDTH : expandedWidth;
-  const panelWidth = collapsed && !peeking ? SIDEBAR_RAIL_WIDTH : expandedWidth;
+  const reservedWidth = !open ? 0 : collapsed ? SIDEBAR_RAIL_WIDTH : expandedWidth;
+  const panelWidth = !open ? 0 : collapsed && !peeking ? SIDEBAR_RAIL_WIDTH : expandedWidth;
   const isOverlay = panelWidth > reservedWidth;
 
   // The drag handle can only resize the expanded width, so it is disabled while