feat(viewer): responsive mobile layout for the pipeline viewer (#124)
* feat(viewer): responsive mobile layout for the pipeline viewer
Below lg (1024px) the main content area swaps from a horizontal split
(page nav strip + page image + resize handle + preview + changes aside)
to a stacked layout where the rendered preview is the main event and the
page image and changes panels become collapsible disclosures above and
below it.
Changes:
- New useMediaQuery hook wraps window.matchMedia reactively
- New CollapsibleRegion component — a disclosure that is also a labelled
landmark (section + aria-labelledby + visible h2 inside the toggle)
- StageTabs row now overflows horizontally on narrow viewports
- Stats bar gets flex-wrap so controls wrap cleanly to a second row
- Page navigation on mobile becomes a compact prev / "Page N of M" / next
picker instead of the vertical strip of page-number buttons
- Both mobile disclosures default collapsed so the preview dominates
No change to the desktop layout at lg+.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
* fix(viewer): stages wrap instead of h-scroll on mobile; stat labels stay on one line
- StageTabs: flex-wrap below lg, flex-nowrap + overflow-x-auto at lg+
- Stats row: whitespace-nowrap on each stat chip so "6 pages", "3352
chars/page" etc. stop breaking onto two lines when the row gets tight
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>