Summary

• constrain the settings page shell to the application viewport
• keep the navigation bar and Back button sticky while the preferences body scrolls independently
• add regression coverage for the viewport, sticky-header, and scroll-container layout contract

Root cause

The settings shell used min-h-screen, which allowed the page to grow with its form content. That handed scrolling to the document instead of the existing main content region, so the navigation bar scrolled out of view.

Impact

The settings navigation remains accessible at the top of the window while users scroll through longer preferences.

Testing

• bun test — 55 tests pass
• bun run build
• bunx biome check src/pages/Settings.tsx src/pages/Settings.test.ts
• Chrome runtime verification at 1024×768 confirmed window.scrollY remains 0, the header remains at top: 0, and the main pane scrolls independently