From 4125d08fb47ddb57707e01837b9764b4ac7d04f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 2 Oct 2026 22:33:17 +0200
Subject: [PATCH 1/2] test(e2e): wait for the lab review sheet to stop sliding
 before measuring

On a phone and a small tablet the review sheet slides up from the bottom;
its width settles before the slide ends, so waiting on width alone still
compared fields from different frames. The spec now waits for every
running animation to finish and for the surface to hold its position and
width across two frames.
---
 e2e/dialog-horizontal-overflow.spec.ts | 28 ++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/e2e/dialog-horizontal-overflow.spec.ts b/e2e/dialog-horizontal-overflow.spec.ts
index 3dbbbde62..07b198b23 100644
--- a/e2e/dialog-horizontal-overflow.spec.ts
+++ b/e2e/dialog-horizontal-overflow.spec.ts
@@ -428,14 +428,23 @@ test.describe("lab-scan review dialog uses the width it is given", () => {
       await expect(rows).toHaveCount(REVIEW_ROWS.length);
 
       const label = `scan review @${vp.label}`;
-      // The sheet widens from the picking stage to the review stage and the
-      // row grid re-flows from the container width it is given. Measuring in
-      // the middle of that sees a half-laid-out row, so wait until the
-      // surface has kept the same width across two frames.
+      // The sheet widens from the picking stage to the review stage, and on a
+      // phone or small tablet it also slides up from the bottom. Measuring
+      // while either runs compares fields from different frames (the width
+      // settles before the slide ends, so waiting on width alone was not
+      // enough). Wait for every running animation and transition to finish,
+      // then for the surface to hold still across two frames.
+      await page.evaluate(() =>
+        Promise.all(
+          document
+            .getAnimations()
+            .map((animation) => animation.finished.catch(() => undefined)),
+        ),
+      );
       await expect
         .poll(
           async () => {
-            const before = (await surface.boundingBox())!.width;
+            const before = (await surface.boundingBox())!;
             await page.evaluate(
               () =>
                 new Promise<void>((resolve) =>
@@ -444,10 +453,13 @@ test.describe("lab-scan review dialog uses the width it is given", () => {
                   ),
                 ),
             );
-            const after = (await surface.boundingBox())!.width;
-            return Math.abs(after - before);
+            const after = (await surface.boundingBox())!;
+            return (
+              Math.abs(after.width - before.width) +
+              Math.abs(after.y - before.y)
+            );
           },
-          { message: `${label}: dialog width settles` },
+          { message: `${label}: dialog settles` },
         )
         .toBeLessThan(0.5);
       await expectNoSidewaysScroll(page, label);

From c08dfc618f12e91a3e40a809cf260310ba0503a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 2 Oct 2026 22:56:27 +0200
Subject: [PATCH 2/2] test(e2e): call a lab review field beside the value when
 it shares its row

The spec compared field tops within 8 px. A field label that wraps onto a
second line, which depends on the runner's font metrics, moves that
field's input down by one line while it stays in the same row, and the
560 px case failed on it. A field is now beside the value when it sits to
its right and starts above the value's bottom edge.
---
 e2e/dialog-horizontal-overflow.spec.ts | 28 +++++++++++++++-----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/e2e/dialog-horizontal-overflow.spec.ts b/e2e/dialog-horizontal-overflow.spec.ts
index 07b198b23..72d49564f 100644
--- a/e2e/dialog-horizontal-overflow.spec.ts
+++ b/e2e/dialog-horizontal-overflow.spec.ts
@@ -482,20 +482,24 @@ test.describe("lab-scan review dialog uses the width it is given", () => {
 
       // Value, unit and date share a line when the fields have room for three
       // columns, and the date wraps under them when they do not.
+      // "Beside" means the same grid row: to the right of the value and
+      // starting above the value's bottom edge. Comparing the tops alone was
+      // too strict, because a field label that wraps onto a second line (it
+      // depends on the runner's font metrics) moves that field's input down
+      // by one line while it stays in the same row.
+      const besideValue = (field: { x: number; y: number }, name: string) => {
+        expect(field.x, `${label}: ${name} right of value`).toBeGreaterThan(
+          value.x,
+        );
+        expect(field.y, `${label}: ${name} in the value's row`).toBeLessThan(
+          value.y + value.height,
+        );
+      };
       if (vp.threeAcross) {
-        expect(
-          Math.abs(unit.y - value.y),
-          `${label}: unit beside value`,
-        ).toBeLessThan(8);
-        expect(
-          Math.abs(date.y - value.y),
-          `${label}: date beside value`,
-        ).toBeLessThan(8);
+        besideValue(unit, "unit");
+        besideValue(date, "date");
       } else {
-        expect(
-          Math.abs(unit.y - value.y),
-          `${label}: unit beside value`,
-        ).toBeLessThan(8);
+        besideValue(unit, "unit");
         expect(date.y, `${label}: date wraps`).toBeGreaterThan(
           value.y + value.height - 1,
         );