EqualifyEverything / equalify-reflow

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>
Dylan Isaac Dylan Isaac committed on Apr 21, 2026, 05:16 PM
Showing 4 changed files +300 additions -123 deletions
Browse files at this commit →