#301: sort the reflow report so the culprit cannot be buried

CI still reports 737 while the local stack is now clean, and the box list
was capped at 15 entries — all of them nav links clipped by their own
scroller. Whatever pushes the page in CI sits past that cap.

The list is now sorted by reach, marks each entry as either clipped by a
fitting scroller or actually pushing the page, and shows 40.

apps/web/e2e/a11y.spec.ts

@@ -141,20 +141,36 @@ async function expectNoHorizontalScroll(page: Page, label: string): Promise<void
       }
     }
 
-    // Raw: every box reaching past the viewport, no filtering at all.
+    /** Content inside a scroll container may exceed the viewport — that is
-    const past: string[] = [];
+     *  the remedy. But only when the CONTAINER fits: a scroller that is
-    for (const el of Array.from(document.querySelectorAll('body *'))) {
+     *  itself too wide still pushes the page. */
-      const rect = el.getBoundingClientRect();
+    const insideFittingScroller = (el: Element): boolean => {
-      if (rect.width > 0 && rect.right > limit + 1) {
+      for (let node = el.parentElement; node && node !== doc; node = node.parentElement) {
-        past.push(`${describe(el)} right=${Math.round(rect.right)} w=${Math.round(rect.width)}`);
+        const ox = getComputedStyle(node).overflowX;
+        if (ox === 'auto' || ox === 'scroll' || ox === 'hidden') {
+          return node.getBoundingClientRect().right <= limit + 1;
+        }
       }
-    }
+      return false;
+    };
+
+    // Widest reach first, so a long tail of clipped children cannot bury the
+    // one box that actually pushes the page.
+    const past = Array.from(document.querySelectorAll('body *'))
+      .map((el) => ({ el, rect: el.getBoundingClientRect() }))
+      .filter(({ rect }) => rect.width > 0 && rect.right > limit + 1)
+      .sort((a, b) => b.rect.right - a.rect.right)
+      .map(
+        ({ el, rect }) =>
+          `${describe(el)} right=${Math.round(rect.right)} w=${Math.round(rect.width)}` +
+          `${insideFittingScroller(el) ? ' [in fitting scroller]' : ' <-- pushes page'}`,
+      );
 
     return {
       overflowBy: doc.scrollWidth - limit,
       viewport: `html client=${limit} scroll=${doc.scrollWidth} | body client=${document.body.clientWidth} scroll=${document.body.scrollWidth} rect=${Math.round(document.body.getBoundingClientRect().width)}`,
       overflowing: overflowing.slice(0, 15),
-      past: past.slice(0, 15),
+      past: past.slice(0, 40),
     };
   });
   const diagnosis = [