From b65339ae13534642af887586685fdeae1bc9cd8e Mon Sep 17 00:00:00 2001 From: Claude Opus 5 Date: Sat, 1 Aug 2026 08:50:02 +0200 Subject: [PATCH] #301: the overflow was an escaping visually-hidden heading MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Found by standing up the local stack instead of guessing through CI. The DOM tree under `.app-body` shows it in one line: span.visually-hidden rect=[342,343] pos=absolute Its right edge is 343, and `.app-body` reports scrollWidth 343 against a 320 client. The table's actions column carries a `.visually-hidden` heading, which is `position: absolute`. `.table-scroll` was `position: static`, so it was NOT that span's containing block — the span escaped the scroller's clipping, kept its static position out at the table's right edge, and pushed the page. `position: relative` on the wrapper makes it the containing block, and the span is clipped like the rest of the table. This is one cause behind both numbers: 23px locally, matching the original report, and 417px in CI, where different font metrics make the table wider and carry the span further out. Chasing them as separate problems is what cost three CI rounds. Verified locally against a real stack: the reflow guard passes and the whole a11y pack is green, 11 tests in both colour schemes. --- apps/web/src/styles/base.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css index 4dfc8f5..74583c7 100644 --- a/apps/web/src/styles/base.css +++ b/apps/web/src/styles/base.css @@ -972,6 +972,13 @@ button { .table-scroll { overflow-x: auto; max-width: 100%; + /* Establishes the containing block for the table's absolutely positioned + descendants — the `.visually-hidden` column headings. Without it their + containing block is `.app-body`, so they escape this scroller's clipping, + keep their static position out at the table's right edge, and push the + PAGE (issue #301). Exactly 23px locally, 417px in CI, where different + font metrics make the table wider — one cause, two numbers. */ + position: relative; } .table {