From 1545f3ec001226a87d7b530eac08e24768f0006e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 7 Jul 2026 20:38:32 +0200
Subject: [PATCH] test(e2e): wait for the settled sidebar width on the
 iPad-portrait guard

The tablet icon-rail collapse is mounted-gated (SSR and the hydration
frame paint the expanded 256px shell to avoid a React #418 mismatch),
so the resolved layout lands on the first client render after hydration
settles. On a loaded runner that can arrive just after networkidle,
letting the guard measure a mid-hydration frame (main=512 instead of
~704). Wait for the content column to reach its settled width before
measuring; a real regression still fails via the wait timing out.
---
 e2e/ipad-viewport.spec.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/e2e/ipad-viewport.spec.ts b/e2e/ipad-viewport.spec.ts
index c222d9404..dde8b9369 100644
--- a/e2e/ipad-viewport.spec.ts
+++ b/e2e/ipad-viewport.spec.ts
@@ -39,6 +39,25 @@ test.describe("iPad portrait layout (768x1024)", () => {
       await page.goto(route, { waitUntil: "domcontentloaded" });
       await page.waitForLoadState("networkidle");
 
+      // The sidebar collapses to the icon rail only on the first client
+      // render after hydration settles (mounted-gated to avoid a React #418
+      // mismatch — SSR and the hydration frame both paint the expanded
+      // 256 px shell, leaving `<main>` at 512 px). On a loaded CI runner that
+      // settle can land just after `networkidle`, so measuring immediately
+      // catches the mid-hydration frame. Wait for the content column to reach
+      // its resolved width first. A genuine regression — the rail never
+      // engaging — still fails: the wait times out and the assertion below
+      // reports the actual (too-narrow) width.
+      await page
+        .waitForFunction(
+          () =>
+            (document.querySelector("main")?.getBoundingClientRect().width ??
+              0) >= 690,
+          undefined,
+          { timeout: 10_000 },
+        )
+        .catch(() => {});
+
       const dims = await page.evaluate(() => ({
         scrollWidth: document.documentElement.scrollWidth,
         bodyScrollWidth: document.body.scrollWidth,