admin: only the content region scrolls on wide screens

the shell grid grew past the viewport and scrolled the document,
carrying the sidebar with it. the shell is now viewport-height at the
wide breakpoint with main as the sole scroll container; the nav list
scrolls inside the pinned rail; router scroll restoration targets the
inner scroller so navigation resets it and back/forward restores it.
This commit is contained in:
2026-08-23 15:17:51 +02:00
parent fe71efe335
commit f7f4c8be09
4 changed files with 46 additions and 2 deletions
+12 -2
View File
@@ -112,6 +112,8 @@ const styles = stylex.create({
},
shell: {
minHeight: "100dvh",
height: { default: null, [WIDE]: "100dvh" },
overflow: { default: null, [WIDE]: "hidden" },
backgroundColor: colors.surface,
color: colors.text,
display: { default: "block", [WIDE]: "grid" },
@@ -120,6 +122,8 @@ const styles = stylex.create({
sidebar: {
display: { default: "none", [WIDE]: "flex" },
flexDirection: { default: null, [WIDE]: "column" },
minHeight: { default: null, [WIDE]: 0 },
overflow: { default: null, [WIDE]: "hidden" },
borderRightWidth: 1,
borderRightStyle: "solid",
borderRightColor: colors.border,
@@ -133,11 +137,14 @@ const styles = stylex.create({
},
sidebarNav: {
flex: 1,
minHeight: { default: null, [WIDE]: 0 },
overflowY: { default: null, [WIDE]: "auto" },
paddingInline: "0.5rem",
},
column: {
display: "flex",
minHeight: "100dvh",
minHeight: { default: "100dvh", [WIDE]: 0 },
minWidth: { default: null, [WIDE]: 0 },
flexDirection: "column",
},
header: {
@@ -177,6 +184,9 @@ const styles = stylex.create({
},
main: {
flex: 1,
minHeight: { default: null, [WIDE]: 0 },
minWidth: { default: null, [WIDE]: 0 },
overflowY: { default: null, [WIDE]: "auto" },
padding: "1rem",
},
});
@@ -335,7 +345,7 @@ export default function AppShell() {
<SidebarFooter />
</div>
)}
<main {...stylex.props(styles.main)}>
<main id="main-content" data-scroll-restoration-id="main" {...stylex.props(styles.main)}>
<Outlet />
</main>
</div>