Repository navigation
mobile: sidebar occupies 64px on 375px viewports with no drawer/overlay fallback #984
Description
Summary
At max-width: 900px the sidebar auto-collapses to icon-only (64px wide) but is never hidden. On a 375px-wide phone this leaves only 311px for the main content area. Dense sections like Recommendations and History are noticeably cramped.
Repro
iOS Safari or Chrome Android, 375x812 viewport. Navigate to any data-dense section.
Where in code
frontend/src/styles/layout.css-@media (max-width: 900px)block collapses sidebar but does not hide itfrontend/src/app.ts/navigation.ts- sidebar toggle logic
Proposed fix
At <=600px (or <=480px), hide the sidebar completely (width: 0; overflow: hidden) and surface the hamburger toggle in the topbar. On tap, show the sidebar as an overlay/drawer with a backdrop. This matches the standard mobile nav pattern.
Implementation in progress: see PR feat/mobile-nav-drawer (under review).
Out of scope
Tablet (768px-900px) layout; sidebar collapse animation.
Activity
cristim commentedon Jul 22, 2026
Verified: PR #991's mobile drawer implementation (the
@media (max-width: 768px)block infrontend/src/styles/responsive.css) sets.app-sidebartoposition: fixed; transform: translateX(-100%)by default, which fully removes it from the flex layout and off-screen at any viewport <=768px, including 375px..app-main(flex: 1) then fills the full width. The icon-only 64px collapse only remains visible in the 768-900px tablet band, which this issue explicitly marked out of scope. No gap found; closing without further changes.