From b697a0a10edf82a7a97e7eac5c4cfa4436502d85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 31 Jul 2026 11:32:44 +0200
Subject: [PATCH] Measure the panel against the band, not against the page

The sideways check could not fail for the case it was written for. A panel
wider than the phone kept it green: the hero band wears overflow-hidden for
its glow, so an over-wide panel is clipped rather than scrolled and the
document never widens by a pixel. The person loses the right-hand end of
every row and nothing reports it.

It now compares the panel with the room the band actually offers, which is
the comparison the clipping makes meaningful.
---
 .../health-score-card-geometry.test.tsx       | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/insights/__tests__/health-score-card-geometry.test.tsx b/src/components/insights/__tests__/health-score-card-geometry.test.tsx
index 69617da29..9912a2c8c 100644
--- a/src/components/insights/__tests__/health-score-card-geometry.test.tsx
+++ b/src/components/insights/__tests__/health-score-card-geometry.test.tsx
@@ -439,11 +439,20 @@ describe("hero band geometry", () => {
             culprit = child.getAttribute("data-slot") ?? child.className;
           }
         }
+        const strip = el.closest('[data-slot="insights-hero-strip"]')!;
+        const stripBox = getComputedStyle(strip);
         return {
           scroll: el.scrollWidth,
           client: el.clientWidth,
+          width: Math.round(el.getBoundingClientRect().width),
           widest: Math.round(widest),
           culprit: String(culprit).slice(0, 60),
+          // The width the band actually offers, padding taken off.
+          available: Math.round(
+            strip.getBoundingClientRect().width -
+              parseFloat(stripBox.paddingLeft) -
+              parseFloat(stripBox.paddingRight),
+          ),
           docScroll: document.documentElement.scrollWidth,
           docClient: document.documentElement.clientWidth,
         };
@@ -457,7 +466,16 @@ describe("hero band geometry", () => {
         m.widest,
         `a child is wider than the panel: ${JSON.stringify(m)}`,
       ).toBeLessThanOrEqual(m.client + 1);
-      // The page itself, which is what a person actually feels.
+      // The panel against the room the band gives it. This is the assertion
+      // that has to carry the phone case: the band wears `overflow-hidden`
+      // for its glow, so a panel wider than the band is silently CLIPPED
+      // rather than scrolled, and the document check below stays green while
+      // a person loses the right-hand end of every row.
+      expect(
+        m.width,
+        `the panel is wider than the band gives it: ${JSON.stringify(m)}`,
+      ).toBeLessThanOrEqual(m.available + 1);
+      // Kept anyway, for anything that escapes the band's clip.
       expect(
         m.docScroll,
         `the page scrolls sideways: ${JSON.stringify(m)}`,