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.

admin/src/routes.tsx

@@ -425,6 +425,8 @@ export function createAppRouter(history?: RouterHistory, queryClient: QueryClien
 		context: { queryClient },
 		defaultPreload: "intent",
 		defaultPreloadStaleTime: 0,
+		scrollRestoration: true,
+		scrollToTopSelectors: ["#main-content"],
 		defaultPendingComponent: RoutePending,
 		defaultErrorComponent: RouteError,
 	});

admin/src/shell/AppShell.test.tsx

@@ -146,6 +146,15 @@ test("shell renders the overview route with all nav links", async () => {
 	}
 });
 
+test("main carries the ids the router scrolls and restores", async () => {
+	renderShell();
+	await screen.findByRole("heading", { name: "Overview" });
+
+	const main = screen.getByRole("main");
+	expect(main.id).toBe("main-content");
+	expect(main.getAttribute("data-scroll-restoration-id")).toBe("main");
+});
+
 test("the three configuration pages sit under a labelled group, after the rest", async () => {
 	renderShell();
 	await screen.findByRole("heading", { name: "Overview" });

admin/src/shell/AppShell.tsx

@@ -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>