[Responsive] Layout sidebar 375px — fixed-width sidebar consumes 51% of viewport with no mobile collapse

[Ryan-Atkinson87]

Severity: major

Breakpoint

Mobile — 375px viewport width

Steps to reproduce

1. Open the app at 375px viewport width (or use browser DevTools mobile emulation)
2. Log in and view any authenticated route
3. Observe the sidebar and main content area

Expected behaviour

At mobile widths, the navigation sidebar collapses (hamburger menu, bottom nav, or drawer) so the full viewport width is available for content.

Actual behaviour

The sidebar renders at w-48 (192px) fixed width. At 375px this occupies 51% of the viewport, leaving only 183px for the main content area. There is no collapse mechanism. The app is technically usable (content is still reachable) but the layout is noticeably degraded.

Note

Code Runner is a self-hosted, single-user tool primarily used on desktop, so this may be acceptable for the MVP. A hamburger/drawer pattern that activates below md (768px) breakpoint would be the standard fix:

// sidebar hidden on mobile, shown with hamburger toggle
<nav className="hidden md:flex w-48 ...">

or a slide-out drawer controlled by state. If mobile is explicitly out of scope for Phase 6, close this issue and note it in the spec.

Location

orchestrator-ui/src/components/Layout.tsx