fix: the Chrome layout tests and popup comments use the popup's real 396x600 size (closes #556)

POPUP_VIEWPORT in tests/e2e/run.js said 360x600, while body in
src/popup/styles/main.css is 396px wide and the background opens an
approval window at 396x600. It is now 396x600, defined once near the top
of the file, and the hostile token symbol's frame takes its size from it.

The transaction approval's sideways-scroll check now sets the approval
page to that size first. Headless Chromium opens the window at 1280x720,
where the page can never scroll sideways, so the check could not fail.
README's list of what the Chrome suite leaves out says so.

Two comments in src/popup/index.html that said 360x600 now say 396x600.

Model: opus-5-5

README.md

@@ -500,9 +500,11 @@ papered over:
   forced by clicking Reveal and the settings gear in one page task, which a
   person cannot do; the case a person can hit, the first decrypt after the popup
   opens while libsodium is still loading, is not driven.
-- Approval windows open at 1280x720 whatever size the extension asks for, so
+- Approval windows open at 1280x720 whatever size the extension asks for. The
-  whether an approval screen fits its window is checked in the Firefox suite
+  transaction approval is checked for sideways scrolling at 396x600 by sizing
-  only.
+  the page itself, which leaves out the window's frame and the page widening its
+  window, so whether an approval screen fits its window is checked in the
+  Firefox suite only.
 
 Any test that drives a failure path on purpose declares the `console.error` it
 is about to provoke, via `errors.expect()`. That is not a mute: the declaration

src/popup/index.html

@@ -90,7 +90,7 @@
                 <div id="add-wallet-section-mnemonic">
                     <!-- The die button shares the instruction's row: on a row
                          of its own it pushes Import below the fold at
-                         360x600. -->
+                         396x600. -->
                     <div class="mb-2 flex justify-between items-start gap-2">
                         <p>
                             Enter your 12 or 24 word recovery phrase below, or
@@ -212,7 +212,7 @@
                     />
                 </div>
                 <!-- The error line sits beside Import, not above it: at
-                     360x600 the button already starts near the bottom of
+                     396x600 the button already starts near the bottom of
                      the popup, and a line of its own would push it below
                      the fold. The longest error fits on one line here. -->
                 <div class="flex items-center gap-2">

tests/e2e/run.js

@@ -60,6 +60,14 @@ const TEST_TIMEOUT_MS = 120000;
 // trailing drain in main().
 const TRAILING_WATCH_MS = 1500;
 
+// The popup's size, as README gives it: `body` in src/popup/styles/main.css
+// is 396px wide, and src/background/index.js opens an approval window at
+// the same 396x600. Pages in this context otherwise get Playwright's
+// 1280x720 default, where the page never scrolls sideways and a button
+// below the popup's fold is still on screen, so a layout measured there
+// passes whatever the page does.
+const POPUP_VIEWPORT = { width: 396, height: 600 };
+
 const tests = [];
 
 function test(name, fn) {
@@ -1885,12 +1893,6 @@ test("a network switch in Settings shows and removes the testnet banner at once
 
 // ------------------------------------------------ dust threshold (#233)
 
-// The popup size README documents the UI as designed for. Pages in this
-// context otherwise get Playwright's 1280x720 default, at which the flash
-// line has room for any plausible message and never wraps — measuring
-// there would pass for every string and prove nothing.
-const POPUP_VIEWPORT = { width: 360, height: 600 };
-
 // Everything below the flash line that must not move when it fills, plus
 // the height of the line itself. Runs in the page.
 //
@@ -2139,7 +2141,7 @@ test("a password error moves nothing on any screen (#297)", async (env) => {
 
 // ------------------------------------------ add wallet Import button (#493)
 
-// At 360x600 the add wallet screen's Import button already starts near the
+// At 396x600 the add wallet screen's Import button already starts near the
 // bottom of the popup, so its password error line sits beside the button
 // rather than above it. Measures the button and the line empty and again
 // filled with the longest error addWallet.js puts there. Runs in the page.
@@ -3431,10 +3433,14 @@ test("six failed receipt lookups in a row end on the unreachable-network message
 // timeout ("<iframe id=\"pwn\"> intercepts pointer events") rather than as
 // anything that names the defect.
 
-// Verbatim from the issue's reproduction.
+// The issue's reproduction, with the frame sized to the popup.
 const HOSTILE_SYMBOL =
     '<iframe id="pwn" src="https://dapp.e2e.test/" ' +
-    'style="position:fixed;left:0;top:0;width:360px;height:600px;z-index:99999"></iframe>';
+    'style="position:fixed;left:0;top:0;width:' +
+    POPUP_VIEWPORT.width +
+    "px;height:" +
+    POPUP_VIEWPORT.height +
+    'px;z-index:99999"></iframe>';
 
 // What a correctly escaped and capped render of it reads as: the first
 // MAX_SYMBOL_LENGTH-1 characters and an ellipsis. Spelled out rather than
@@ -4566,6 +4572,10 @@ test("eth_sendTransaction signs the approved transaction and broadcasts it (#183
             JSON.stringify(screen.data),
     );
 
+    // Headless Chromium opens the approval window at 1280x720 whatever size
+    // the extension asks for, and at that width the page can never scroll
+    // sideways. So it is measured at the size the window is opened at.
+    await popup.setViewportSize(POPUP_VIEWPORT);
     await assertAddressesFit(popup, "the dApp transaction prompt");
 
     const broadcastBefore = env.routeOpts.broadcastTransactions.length;