1# Mobile-Friendly Spec Browser Layout Delta23## ADDED Requirements45### Requirement: Mobile-friendly spec browser layout6The dashboard spec browser SHALL remain usable on narrow mobile screens without page-level horizontal overflow.78#### Scenario: Spec browser collapses to one column9- **GIVEN** the dashboard is viewed on a narrow mobile viewport10- **WHEN** the user opens the spec browser11- **THEN** the file list and selected spec detail are arranged in a single-column layout instead of a fixed desktop two-column grid1213#### Scenario: Spec list remains navigable14- **GIVEN** the dashboard is viewed on a narrow mobile viewport with multiple specs15- **WHEN** the spec browser renders the file list16- **THEN** the file list is horizontally scrollable within its own region and does not widen the whole page1718#### Scenario: Long spec text wraps safely19- **GIVEN** a spec path, requirement name, scenario name, step text, or card title is longer than the available mobile width20- **WHEN** the dashboard renders it21- **THEN** the text wraps or truncates within its container without forcing horizontal page overflow2223### Requirement: Mobile-friendly spec diff layout24The dashboard spec diff views SHALL preserve all review modes on narrow mobile screens while using readable stacked layouts where needed.2526#### Scenario: Side-by-side diff stacks on mobile27- **GIVEN** the dashboard is viewed on a narrow mobile viewport28- **WHEN** the user selects the side-by-side diff view29- **THEN** the before and after diff panes stack vertically instead of requiring two columns across the viewport3031#### Scenario: Semantic scenario changes stack on mobile32- **GIVEN** a semantic diff contains before and after scenario content33- **WHEN** the dashboard renders it on a narrow mobile viewport34- **THEN** the before and after scenario blocks stack vertically with readable line lengths3536#### Scenario: Diff mode controls remain reachable37- **GIVEN** the dashboard is viewed on a narrow mobile viewport38- **WHEN** the user opens dirty or refs mode in the spec browser39- **THEN** semantic, side-by-side, and raw diff controls remain visible or horizontally scrollable instead of being hidden4041### Requirement: Mobile-friendly dashboard modal framing42Dashboard modal and page framing SHALL adapt to narrow screens so spec content remains readable and close controls remain reachable.4344#### Scenario: Mobile modal uses reduced padding45- **GIVEN** the dashboard opens a modal on a narrow mobile viewport46- **WHEN** the modal renders47- **THEN** the overlay and modal body use reduced padding and a viewport-bounded body height4849#### Scenario: Mobile page avoids horizontal overflow50- **GIVEN** the dashboard is viewed on a narrow mobile viewport51- **WHEN** the page renders board, toolbar, or spec browser controls52- **THEN** the page prevents horizontal overflow while allowing bounded control groups to wrap or scroll