1## Context23The dashboard spec browser has several wide surfaces:45- top-level toolbar and view-mode controls6- `os-specs-grid` two-column file-list/detail layout7- side-by-side diff columns8- long spec paths and requirement/scenario text9- modal wrappers used by change/spec detail views1011These are fine on desktop but break narrow screens by creating horizontal overflow or cramped controls.1213## Decisions1415### Decision 1: Collapse the spec browser grid on narrow screens1617Use a single-column layout for the spec browser below the mobile breakpoint. The file list becomes a horizontal strip so the selected spec remains close to the detail pane without requiring a full vertical list before the content.1819### Decision 2: Stack diff columns on mobile2021Side-by-side content is a desktop affordance. On mobile, before/after columns and scenario-level before/after blocks stack vertically to preserve readable line lengths.2223### Decision 3: Wrap long identifiers and text2425Spec paths, requirement names, scenario names, step text, and card titles wrap with `overflow-wrap: anywhere` where needed. This prevents one long token or path from pushing the entire page wider than the viewport.2627### Decision 4: Keep controls available2829Mode toggles and toolbar groups wrap or become horizontally scrollable instead of disappearing. Users should not lose semantic/side-by-side/raw review capability just because they are on mobile.3031## Risks / Trade-offs3233- Horizontal file-list scrolling is still a scroll surface, but it is bounded to the list rather than the entire page.34- Side-by-side diff mode is no longer visually side-by-side on mobile; the semantic meaning is preserved by stacked before/after content.