Problem
The application shell and its fixed mobile drawer are locked to 100vh through Tailwind's h-screen, while the shell also hides overflow. Mobile browser chrome changes the visible viewport independently of 100vh, leaving bottom content or drawer navigation outside the usable screen.
Evidence
The root layout is "h-screen flex bg-app-bg overflow-hidden" and delegates scrolling only to the inner main element (Layout.tsx:16-19). The mobile/desktop sidebar is separately "fixed top-0 left-0 h-screen" (Sidebar.tsx:167-174). There is no dvh/safe-area sizing or fallback logic in the shared stylesheet or layout.
Impact
At 360x640 with browser controls expanded or after the visual viewport changes (address bar/keyboard), a 100vh shell can be taller than the visible viewport. Because the outer shell is overflow-hidden, content at the bottom of the active page and the drawer's fixed theme/navigation area can be obscured rather than scrolling into view. This affects the initial app viewport and primary navigation, so it is raised to high severity.
Implementation plan
Replace the shared full-height shell and drawer sizing with a dynamic viewport-height rule (min-h-dvh/h-dvh, with an appropriate legacy fallback) and preserve a single explicit scroll owner. Include safe-area bottom padding where the drawer or page actions can meet the device edge. Do not change individual page layouts to compensate for the shell.
Acceptance criteria
- At 360x640, changing the mobile browser visual viewport does not hide the bottom of the main scroll area or sidebar theme toggle.
- The mobile drawer can scroll all navigation items and its footer into the visible viewport.
- Desktop behavior remains a full-height fixed-sidebar layout at 768x1024 and 1280x800, with no nested page-level body scrollbar.
Verification
Use browser device emulation at 360x640 and vary the visual viewport (including focus on a text field). Open the sidebar, scroll its navigation to the footer, then scroll a long main page to its final action. Repeat at 768x1024 and 1280x800 and verify the shell has one intended vertical scroll owner.
Dependencies and related work
No dependency. The shared layout change should be applied before page-specific viewport-height fixes.
Scope
Complexity: low. Files: shared layout/sidebar and, if needed, shared theme CSS for a fallback/safe-area token. Non-goals: redesigning navigation or changing page content.
Problem
The application shell and its fixed mobile drawer are locked to
100vhthrough Tailwind'sh-screen, while the shell also hides overflow. Mobile browser chrome changes the visible viewport independently of100vh, leaving bottom content or drawer navigation outside the usable screen.Evidence
The root layout is
"h-screen flex bg-app-bg overflow-hidden"and delegates scrolling only to the inner main element (Layout.tsx:16-19). The mobile/desktop sidebar is separately"fixed top-0 left-0 h-screen"(Sidebar.tsx:167-174). There is nodvh/safe-area sizing or fallback logic in the shared stylesheet or layout.Impact
At 360x640 with browser controls expanded or after the visual viewport changes (address bar/keyboard), a
100vhshell can be taller than the visible viewport. Because the outer shell is overflow-hidden, content at the bottom of the active page and the drawer's fixed theme/navigation area can be obscured rather than scrolling into view. This affects the initial app viewport and primary navigation, so it is raised to high severity.Implementation plan
Replace the shared full-height shell and drawer sizing with a dynamic viewport-height rule (
min-h-dvh/h-dvh, with an appropriate legacy fallback) and preserve a single explicit scroll owner. Include safe-area bottom padding where the drawer or page actions can meet the device edge. Do not change individual page layouts to compensate for the shell.Acceptance criteria
Verification
Use browser device emulation at 360x640 and vary the visual viewport (including focus on a text field). Open the sidebar, scroll its navigation to the footer, then scroll a long main page to its final action. Repeat at 768x1024 and 1280x800 and verify the shell has one intended vertical scroll owner.
Dependencies and related work
No dependency. The shared layout change should be applied before page-specific viewport-height fixes.
Scope
Complexity: low. Files: shared layout/sidebar and, if needed, shared theme CSS for a fallback/safe-area token. Non-goals: redesigning navigation or changing page content.