gsadmin/pad
1
0
Fork 0
mirror of https://github.com/PerpetualSoftware/pad.git synced 2026-09-23 19:06:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): reflow page content when sidebar collapses (BUG-1651) (#689)

Browse Source 
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.
This commit is contained in:
xarmian
2026-05-31 11:54:38 -04:00
committed by GitHub
parent a5c7fc986e
commit d2e80efefc
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/layout/Sidebar.svelte
+13 -1
View File
@@ -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;