docs: say what a closed window does to a tx or sign approval (closes #505)

The approval port's disconnect handler leaves a transaction or signing
approval pending, and its comments said that was so the user could reopen
the toolbar popup. Those approvals open in their own window. When that
window closes, the windows.onRemoved listener rejects the approval, unless
an approved attempt is still running, in which case that attempt answers
the page. Both comments now say so. No code changed.

Model: opus-5-5

TODO.md

@@ -2,10 +2,9 @@
 
 - `git pull` `next` and cut a branch from it — one branch per issue, named
   `issue-<N>-<slug>`. Never branch from `main`.
-- Do the work as one commit whose title ends with ` (closes #N)`, with the
-  `TODO.md` update in that same commit.
-- Move Next Step to the top of Completed Steps; move the top item of Future
-  Steps into Next Step.
+- Do the work as one commit whose title ends with ` (closes #N)`.
+- Add no entry to Completed Steps. What landed is recorded on the tracker and in
+  `git log`, where each commit title names the issue it closes.
 - Run `make fmt`, then `make check`. A feature branch may be red; `next` and
   `main` may not.
 - Rebase onto current `next` immediately before pushing — other branches land on

src/background/index.js

@@ -632,8 +632,9 @@ function isExtensionSender(sender) {
 // had refused.
 //
 // TX and sign approvals do not decide here. They stay pending across a
-// disconnect, and the windows.onRemoved listener below settles them when their
-// window closes.
+// disconnect. When their window closes, the windows.onRemoved listener below
+// rejects them, unless an approved attempt is still running, in which case
+// that attempt answers the page.
 runtime.onConnect.addListener((port) => {
     if (port.name.startsWith("approval:")) {
         const id = port.name.split(":")[1];
@@ -661,7 +662,9 @@ runtime.onConnect.addListener((port) => {
             const approval = pendingApprovals[id];
             if (approval) {
                 if (approval.type === "tx" || approval.type === "sign") {
-                    // windows.onRemoved settles it when its window closes.
+                    // When its window closes, windows.onRemoved rejects it,
+                    // unless an approved attempt is still running, in which
+                    // case that attempt answers the page.
                     return;
                 }
                 settleApproval(id, { approved: false, remember: false });

src/popup/index.html

@@ -7,9 +7,10 @@
         <link rel="stylesheet" href="styles.css" />
     </head>
     <!-- Chrome gives extension pages a stylesheet of its own that sets the
-         font on body, and a Tailwind class beats it only when marked
-         important: hence font-mono! rather than font-mono. -->
-    <body class="bg-bg text-fg font-mono! text-sm">
+         font and its size on body, and a Tailwind class beats it only when
+         marked important: hence font-mono! and text-sm! rather than
+         font-mono and text-sm. -->
+    <body class="bg-bg text-fg font-mono! text-sm!">
         <div id="app" class="p-2 pr-5 overflow-x-hidden">
             <!-- ============ GLOBAL TITLE BAR ============ -->
             <div
@@ -87,11 +88,14 @@
 
                 <!-- Mnemonic form section -->
                 <div id="add-wallet-section-mnemonic">
-                    <p class="mb-2">
-                        Enter your 12 or 24 word recovery phrase below, or click
-                        the button to roll the die for a new one.
-                    </p>
-                    <div class="mb-1 flex justify-end">
+                    <!-- The die button shares the instruction's row: on a row
+                         of its own it pushes Import below the fold at
+                         360x600. -->
+                    <div class="mb-2 flex justify-between items-start gap-2">
+                        <p>
+                            Enter your 12 or 24 word recovery phrase below, or
+                            click the button to roll the die for a new one.
+                        </p>
                         <button
                             id="btn-generate-phrase"
                             class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"

tests/e2e/firefox/run.js

@@ -128,6 +128,18 @@ step("the popup is drawn in the monospace font it declares", async (env) => {
     );
 });
 
+// The same check as the Chrome suite's (#456), so both browsers are held to
+// the same size.
+step("the popup's text is drawn at the 14px text-sm declares", async (env) => {
+    const size = await env.driver.execute(
+        "return getComputedStyle(document.body).fontSize;",
+    );
+    assert(
+        size === "14px",
+        "the popup's text is drawn at " + size + ", not at the 14px of text-sm",
+    );
+});
+
 // The recovery screen (#361): the Chrome suite's four cases, run before any
 // wallet exists for the same reason. With no wallet nothing saves on a timer,
 // so no save can write a good record over the unreadable one. The last of them

tests/e2e/run.js

@@ -113,6 +113,18 @@ test("the popup is drawn in the monospace font it declares (#418)", async (env)
     );
 });
 
+// The same stylesheet sets the size on body to 75%, which would draw the
+// popup at 12px.
+test("the popup's text is drawn at the 14px text-sm declares (#456)", async (env) => {
+    const size = await env.page.evaluate(
+        () => getComputedStyle(document.body).fontSize,
+    );
+    assert(
+        size === "14px",
+        "the popup's text is drawn at " + size + ", not at the 14px of text-sm",
+    );
+});
+
 // The empirical half of #182. The manifest change is only a claim about
 // what the CSP permits; this is the observation. Two things have to hold
 // together, and the run covers both: the popup realm compiles WASM (here),