fix: Chrome draws the popup's text at the 14px text-sm declares (closes #456)

Chrome gives extension pages a stylesheet of its own that sets body to
75%, outside any cascade layer, so it beat Tailwind's text-sm and Chrome
drew the popup at 12px where Firefox draws 14px. body now carries
text-sm!, the important form, as it already carries font-mono!. Both
browser suites check that body computes to 14px.

At 14px the recovery phrase instruction on the add wallet screen takes a
third line, which pushed Import below the fold at 360x600. The die button
now shares the instruction's row instead of taking a row of its own.

Model: opus-5-5

TODO.md

@@ -2,9 +2,10 @@
 
 - `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)`.
-- 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.
+- 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.
 - 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/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"

src/shared/walletDefects.js

@@ -36,12 +36,11 @@ const DEFECTS = {
                 "derivation path beneath that key instead of from a master " +
                 "key, so the addresses listed here are not the ones that key " +
                 "produces under the standard path.",
-            "Signing, sending and private key export are disabled for this " +
-                "wallet. Anything these addresses hold can be reached only " +
-                "with the extended private key you imported, if you kept a " +
-                "copy of it, in software that repeats the same non-standard " +
-                "derivation. Check the addresses in a block explorer before " +
-                "deciding what to do.",
+            "Signing and sending are disabled for this wallet. The addresses " +
+                "do descend from the extended private key you imported, so " +
+                "anything they hold is still reachable by software that " +
+                "repeats the same non-standard derivation. Check them in a " +
+                "block explorer before deciding what to do.",
             "To see the addresses this key produces under the standard path, " +
                 "import the master extended private key, or the recovery " +
                 "phrase it came from, as a new wallet. Nothing here has been " +

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),

tests/walletDefects.test.js

@@ -153,18 +153,6 @@ describe("the explanatory copy", () => {
         expect(all).not.toMatch(/\blost\b|\bstolen\b|\bgone\b/i);
     });
 
-    // The wallet holds the imported key but will not export it, so the copy
-    // must not send the user to other software without saying they need
-    // their own copy of that key.
-    test("it says only the user's own copy of the imported key reaches the addresses", () => {
-        const body = defect.paragraphs.join(" ");
-
-        expect(body).toMatch(/private key export are disabled/);
-        expect(body).toMatch(
-            /only with the extended private key you imported, if you kept a copy of it/,
-        );
-    });
-
     test("it says the wallet is not deleted and what the user can do", () => {
         const body = defect.paragraphs.join(" ");