From 83b169d99133f1abd48ce1bb4f1a68c08c7b9ea1 Mon Sep 17 00:00:00 2001
From: clawbot <35+clawbot@noreply.example.org>
Date: Mon, 5 Oct 2026 09:43:08 +0200
Subject: [PATCH] fix: Chrome draws the popup in its monospace font (closes
 #418)

Chrome adds a stylesheet of its own to extension pages that sets the font
on body. Tailwind 4 puts its classes in a cascade layer, and a rule outside
any layer wins over them, so font-mono lost and Chrome drew the popup in
the system font. body now carries font-mono!, which marks the class
important. Both end-to-end suites check the popup's font.

The same stylesheet also makes Chrome draw the popup's text at 12px rather
than text-sm's 14px; that is unchanged here and filed as issue 456.

Model: opus-5-5
---
 TODO.md                  | 10 ++++++++++
 src/popup/index.html     |  5 ++++-
 tests/e2e/firefox/run.js | 14 ++++++++++++++
 tests/e2e/run.js         | 14 ++++++++++++++
 4 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/TODO.md b/TODO.md
index 73b5b7b..5b8e533 100644
--- a/TODO.md
+++ b/TODO.md
@@ -45,6 +45,16 @@ but the review is broader than any of them.
 
 # Completed Steps
 
+- 2026-10-05: Chrome draws the popup in its monospace font
+  ([#418](https://git.eeqj.de/sneak/AutistMask/issues/418)), as Firefox does.
+  Chrome adds a stylesheet of its own to extension pages that sets the font on
+  `body`, and it beat Tailwind's `font-mono`: Tailwind 4 puts its classes in a
+  cascade layer, and a rule outside any layer wins over them. `body` now carries
+  `font-mono!`, which marks the class important. Both end-to-end suites check
+  the popup's font. The same stylesheet also makes Chrome draw the popup's text
+  at 12px rather than the 14px `text-sm` asks for; that is unchanged, and filed
+  as [#456](https://git.eeqj.de/sneak/AutistMask/issues/456).
+
 - 2026-10-05: Dead code removed and copied view helpers shared
   ([#168](https://git.eeqj.de/sneak/AutistMask/issues/168)). AddressDetail and
   AddressToken each defined their own `isoDate()` and `timeAgo()` in place of
diff --git a/src/popup/index.html b/src/popup/index.html
index d318b67..3019c8a 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -6,7 +6,10 @@
         <title>AutistMask</title>
         <link rel="stylesheet" href="styles.css" />
     </head>
-    <body class="bg-bg text-fg font-mono text-sm">
+    <!-- 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">
         <div id="app" class="p-2 pr-5 overflow-x-hidden">
             <!-- ============ GLOBAL TITLE BAR ============ -->
             <div
diff --git a/tests/e2e/firefox/run.js b/tests/e2e/firefox/run.js
index c86b118..a7d5d99 100644
--- a/tests/e2e/firefox/run.js
+++ b/tests/e2e/firefox/run.js
@@ -108,6 +108,20 @@ step("popup loads and reaches the welcome view", async (env) => {
     assert(title === "AutistMask", "unexpected popup title: " + title);
 });
 
+// The same check as the Chrome suite's (#418), so both browsers are held to
+// the same font.
+step("the popup is drawn in the monospace font it declares", async (env) => {
+    const font = await env.driver.execute(
+        "return getComputedStyle(document.body).fontFamily;",
+    );
+    // --font-mono in src/popup/styles/main.css, as the browser writes it out.
+    assert(
+        font ===
+            'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+        "the popup is drawn in " + font + ", not in --font-mono",
+    );
+});
+
 step("wallet creation through the UI reaches the main view", async (env) => {
     const d = env.driver;
     await d.click("#btn-welcome-add");
diff --git a/tests/e2e/run.js b/tests/e2e/run.js
index 191c405..5307e4f 100644
--- a/tests/e2e/run.js
+++ b/tests/e2e/run.js
@@ -93,6 +93,20 @@ test("popup loads and reaches the welcome view", async (env) => {
     assert(title === "AutistMask", "unexpected popup title: " + title);
 });
 
+// Chrome's own stylesheet for extension pages sets the font on body; see the
+// comment above <body> in src/popup/index.html.
+test("the popup is drawn in the monospace font it declares (#418)", async (env) => {
+    const font = await env.page.evaluate(
+        () => getComputedStyle(document.body).fontFamily,
+    );
+    // --font-mono in src/popup/styles/main.css, as the browser writes it out.
+    assert(
+        font ===
+            'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+        "the popup is drawn in " + font + ", not in --font-mono",
+    );
+});
+
 // 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),