From d2e80efefc59ce057150f388e39d035a572662bd Mon Sep 17 00:00:00 2001 From: xarmian Date: Sun, 31 May 2026 11:54:38 -0400 Subject: [PATCH] fix(web): reflow page content when sidebar collapses (BUG-1651) (#689) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Desktop .sidebar.collapsed only applied translateX(-100%), which slides the sidebar off-screen but keeps its column reserved in the .app-shell flex row — .main-content (flex: 1) had nothing to expand into, leaving a blank gap. Release width/min-width on desktop-collapsed so the flex row reflows; scoped :not(.mobile) since the mobile sidebar is position: fixed and uses its width to drive the slide-in drawer. Width animates alongside the existing transform transition for a smooth close. --- web/src/lib/components/layout/Sidebar.svelte | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/web/src/lib/components/layout/Sidebar.svelte b/web/src/lib/components/layout/Sidebar.svelte index fc1f4b46..bd539eaa 100644 --- a/web/src/lib/components/layout/Sidebar.svelte +++ b/web/src/lib/components/layout/Sidebar.svelte @@ -709,13 +709,25 @@ flex-direction: column; height: 100%; overflow: hidden; - transition: transform 0.25s ease; + transition: transform 0.25s ease, width 0.25s ease, min-width 0.25s ease; transform: translateX(0); } .sidebar.collapsed { transform: translateX(calc(var(--sidebar-width) * -1)); pointer-events: none; } + /* + BUG-1651: on desktop the sidebar is a flex child of .app-shell, so the + collapsed transform alone slides it off-screen but leaves its width + reserved in the flex row — .main-content can't expand into the gap. + Releasing width/min-width lets the row reflow so content fills the + space. Excluded on mobile, where the sidebar is position: fixed (out of + flow) and the width drives the slide-in drawer. + */ + .sidebar.collapsed:not(.mobile) { + width: 0; + min-width: 0; + } .sidebar.mobile { position: fixed; z-index: 30;