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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user