fix(frontend): page-level horizontal scroll on Opportunities, Purchases and Admin #703
Description
Summary
Several pages scroll horizontally at page level: Opportunities by +435px at 1280 wide, Purchases by +153px, and Admin by up to +438px at 390 wide.
Where
Reviewed commit b50ca38.
frontend/src/styles/responsive.css:115-127(table wrapping only applies below 768px)frontend/src/styles/settings.css:68-73(<fieldset>min-content width)frontend/src/styles/components.css:1237-1255(hidden 250px tooltips and a bulk bar without wrap)
Failure scenario
Unwrapped tables above 768px, <fieldset> min-content sizing, hidden tooltips that still take layout width and a non-wrapping bulk bar push the page wider than the viewport, so the whole page scrolls sideways. Verified live and in source. Caveat: the usability reviewer's live run measured 0 overflow for Opportunities at 390 (different mock data).
Suggested fix
Apply .table-wrap at all widths, add min-width: 0 on fieldsets, use display: none for hidden tooltips, allow the bulk bar to wrap, and add a Playwright scrollWidth guard per page.
Related: #185 (clipped right-edge columns with no scroll affordance inside tables; this issue is page-level overflow).
Severity
High: layout breakage on core pages at common viewport sizes.
Reviewer ID: VIS-09 (vis H9)
Found by the 2026-10-08 review fleet.
Activity
fix(frontend): scope table overflow to containers and cover populated…
fix(frontend): stop pages scrolling horizontally at 1280, 768 and 390 (…
IAmJSD commentedon Oct 23, 2026
Closing as already fixed by #767 (merged as 9a14691), which said "Refs #703" so the issue stayed open. Verified on main a14dc8f with the mocked e2e API: 0px page-level horizontal scroll on all 9 pages at 1280, 768 and 390 widths.
fix(frontend): clip rounded table corners, style headers and tidy CSS (…
feat(frontend): add horizontal scroll affordances to wide data tables (…