Mobile Responsive App — Steer Document¶

Date: 2026-04-10 (Session 35) Status: Implemented — P0/P1/P2 all merged Companion spec: ../mobile-responsive-feature.md

Problem¶

The conversational UI was desktop-first. On 375px mobile screens, the 56px icon rail + 360px left panel + chat area didn't fit. Core flow was unusable on mobile.

Decision¶

Hide the icon rail on mobile. Replace with a hamburger menu that opens a slide-out drawer (Claude mobile app pattern). Panels become full-screen overlays with backdrop-tap-to-close.

Design Rationale¶

Why hamburger drawer, not bottom tab bar¶

Bottom tab bar was tried first (PR #23) but overlapped the chat input bar. The hamburger drawer pattern (like Claude, ChatGPT) avoids this by not competing for vertical space. The drawer also provides room for recent cases list and new-case CTA.

Why 100svh not 100dvh¶

dvh (dynamic viewport height) on Android includes the browser address bar area, pushing the input bar behind it. svh (small viewport height) uses the visible area after the address bar is shown — the input bar stays above the chrome.

Why interactive-widget=resizes-content¶

Tells mobile browsers to resize the layout viewport when the keyboard or address bar appears. Belt-and-suspenders with svh.

Why CSS variable theming, not dark: variants¶

dark: is a two-mode system (light/dark). CSS variables support N themes. Adding a theme = one CSS block, zero component changes. Three themes shipped: Light, Dark, High Contrast (WCAG AAA).

Why themes scoped to /app only¶

Storefront pages have ~270 hardcoded colors that don't respond to CSS variables. Theming them requires a separate migration. Scoping avoids a broken experience on public pages.

Breakpoints¶

• < 768px: hamburger drawer, full-screen panels, no icon rail
• 768-1024px: icon rail, overlay panels with backdrop
• > 1024px: icon rail + inline panels (current desktop layout)

References¶

• Feature spec: docs/specs/mobile-responsive-feature.md
• Audit: Session 35 (25 findings, P0-P2)