Problem
The app layout is desktop-first and uses a fixed horizontal split. On a phone-width viewport, notes and transcript become side-by-side columns that are too narrow for the core workflow.
Evidence
index.html:260-264 defines .content as a horizontal flex container.index.html:269-274 fixes notes to 70% width with a right border.index.html:636-640 leaves transcript as the remaining 30% column.- Current CSS has no responsive
@media query covering the main app layout.
Acceptance criteria
- Add responsive CSS for phone-width viewports.
- Stack or tab notes/transcript so each core surface is usable around 390 px width.
- Keep start/stop/settings/share controls reachable without horizontal scrolling.
- Verify no overlapping text/buttons in a mobile viewport.
- Validate with a real browser screenshot before closing.
Problem
The app layout is desktop-first and uses a fixed horizontal split. On a phone-width viewport, notes and transcript become side-by-side columns that are too narrow for the core workflow.
Evidence
index.html:260-264defines.contentas a horizontal flex container.index.html:269-274fixes notes to 70% width with a right border.index.html:636-640leaves transcript as the remaining 30% column.@mediaquery covering the main app layout.Acceptance criteria