Add phone-size test projects and a scrolled-QR gallery shot.

Add emulated iPhone 15 (`iphone`) and Pixel 7 (`android-pixel`)
Playwright projects. On a phone the popup is clamped to the screen
width and crosses the dialog's 430px "small screen" CSS breakpoint, so
these exercise layout branches the 500px desktop projects do not; all
invariants hold there too.

Also capture an `-expanded-scrolled` gallery shot when the expanded QR
code sits below the fold (many wallets on a short/phone viewport), so
the gallery shows the QR is reachable by scrolling.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: djscruggs

CHANGELOG.md

@@ -20,8 +20,9 @@
   chooser dialog. A dev-only `/test/wallet-chooser` harness route
   renders the dialog with fake state across wallet counts and the
   cross-device QR section; `npm run test:e2e` asserts layout invariants
-  on Chromium, WebKit, and Firefox, and `npm run gallery` produces a
-  browsable screenshot gallery.
+  on desktop Chromium, WebKit, and Firefox plus emulated iPhone and
+  Pixel phone sizes, and `npm run gallery` produces a browsable
+  screenshot gallery.
 
 ## 7.4.3 - 2026-06-12
 

README.md

@@ -96,14 +96,22 @@ Install the browser engines once:
 
     npx playwright install chromium webkit firefox
 
-Run the layout regression suite (Chromium, WebKit, Firefox):
+Run the layout regression suite:
 
     npm run test:e2e
 
 This asserts structural invariants — the expected wallets render, no horizontal
 or window scrollbar appears, the header stays pinned while the list scrolls, and
 the panel fills the popup — rather than comparing pixels. It starts the dev
-server automatically.
+server automatically and runs five projects: desktop Chromium, WebKit, and
+Firefox at the 500px popup width, plus emulated **iPhone 15** and **Pixel 7**.
+The phone projects matter because on a phone the popup is clamped to the screen
+width and crosses the dialog's 430px "small screen" CSS breakpoint, exercising
+layout branches the desktop width does not.
+
+Run a single project with, e.g., `npm run test:e2e -- --project=iphone`. The
+project names are `chromium`, `webkit`, `firefox`, `iphone`, and
+`android-pixel`.
 
 Generate a browsable screenshot gallery of every state (wallet count × theme ×
 engine, collapsed and expanded), with an `index.html` contact sheet:

playwright.config.js

@@ -34,6 +34,19 @@ export default defineConfig({
     {
       name: 'firefox',
       use: {...devices['Desktop Firefox'], viewport: {width: 500, height: 640}}
+    },
+    // phone-sized projects: on a phone the popup is clamped to the screen
+    // width (narrower than the 500px desktop popup) and crosses the
+    // dialog's 430px "small screen" CSS breakpoint, so these exercise
+    // layout branches the desktop projects do not. Device descriptors also
+    // set a touch-capable, mobile-UA context.
+    {
+      name: 'iphone',
+      use: {...devices['iPhone 15']}
+    },
+    {
+      name: 'android-pixel',
+      use: {...devices['Pixel 7']}
     }
   ],
   // start the authn.io dev server automatically; reuse one already running

test/e2e/gallery.spec.js

@@ -48,9 +48,24 @@ test.describe('gallery', () => {
           const toggle = page.locator('.cross-device-toggle');
           if(await toggle.count() > 0) {
             await toggle.click();
-            await expect(page.locator('img[alt*="QR"]')).toBeVisible();
+            const qr = page.locator('img[alt*="QR"]');
+            await expect(qr).toBeVisible();
             await page.screenshot(
               {path: path.join(dir, `${state.name}-expanded.png`)});
+
+            // when the expanded QR sits below the fold (many wallets on a
+            // short/phone viewport), also capture a shot scrolled to the
+            // QR, so the gallery shows it is reachable
+            const qrInView = await qr.evaluate(el => {
+              const r = el.getBoundingClientRect();
+              return r.bottom <= window.innerHeight && r.top >= 0;
+            });
+            if(!qrInView) {
+              await qr.scrollIntoViewIfNeeded();
+              await expect(qr).toBeInViewport();
+              await page.screenshot(
+                {path: path.join(dir, `${state.name}-expanded-scrolled.png`)});
+            }
           }
         });
       }