fix: Chrome draws the popup in its monospace font (closes #418)
check / check (push) Failing after 3s
e2e / e2e-chrome (push) Failing after 3s
e2e / e2e-firefox (push) Failing after 2s

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
This commit was merged in pull request #457.
This commit is contained in:
2026-10-05 09:43:08 +02:00
parent 6fece80afd
commit 83b169d991
4 changed files with 42 additions and 1 deletions
+4 -1
View File
@@ -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