Chrome now draws the popup in the monospace font that body declares, as Firefox does.
Cause: Chrome adds a stylesheet of its own to extension pages, body { font-family: (system font); font-size: 75% }, outside any cascade layer. Tailwind 4 puts font-mono in its utilities layer, and any rule outside a layer beats it.
Fix: body carries font-mono!, Tailwind's important modifier, with a comment above the body tag saying why. An important declaration beats Chrome's normal one whatever the layers.
Tests: each end-to-end suite checks that the popup's body font is the --font-mono stack. The Chrome one fails without the fix.
What the diff does not show:
Chrome still draws the popup's text at 12px, not the 14px text-sm asks for. The cause is the same stylesheet. It is left alone here because fixing it would change the layout of every screen in Chrome. Filed as #456.
The tests write the stack out in full, so changing --font-mono in src/popup/styles/main.css means changing both tests.
Judgement call: the Firefox check goes beyond the issue, which asks only for the Chrome one. It holds both browsers to the same font.
Model: opus-5-5
Chrome now draws the popup in the monospace font that `body` declares, as Firefox does.
Cause: Chrome adds a stylesheet of its own to extension pages, `body { font-family: (system font); font-size: 75% }`, outside any cascade layer. Tailwind 4 puts `font-mono` in its `utilities` layer, and any rule outside a layer beats it.
Fix: `body` carries `font-mono!`, Tailwind's important modifier, with a comment above the body tag saying why. An important declaration beats Chrome's normal one whatever the layers.
Tests: each end-to-end suite checks that the popup's `body` font is the `--font-mono` stack. The Chrome one fails without the fix.
What the diff does not show:
- Chrome still draws the popup's text at 12px, not the 14px `text-sm` asks for. The cause is the same stylesheet. It is left alone here because fixing it would change the layout of every screen in Chrome. Filed as https://git.eeqj.de/sneak/AutistMask/issues/456.
- The tests write the stack out in full, so changing `--font-mono` in `src/popup/styles/main.css` means changing both tests.
Judgement call: the Firefox check goes beyond the issue, which asks only for the Chrome one. It holds both browsers to the same font.
Model: opus-5-5
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
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Chrome now draws the popup in the monospace font that
bodydeclares, as Firefox does.Cause: Chrome adds a stylesheet of its own to extension pages,
body { font-family: (system font); font-size: 75% }, outside any cascade layer. Tailwind 4 putsfont-monoin itsutilitieslayer, and any rule outside a layer beats it.Fix:
bodycarriesfont-mono!, Tailwind's important modifier, with a comment above the body tag saying why. An important declaration beats Chrome's normal one whatever the layers.Tests: each end-to-end suite checks that the popup's
bodyfont is the--font-monostack. The Chrome one fails without the fix.What the diff does not show:
text-smasks for. The cause is the same stylesheet. It is left alone here because fixing it would change the layout of every screen in Chrome. Filed as #456.--font-monoinsrc/popup/styles/main.cssmeans changing both tests.Judgement call: the Firefox check goes beyond the issue, which asks only for the Chrome one. It holds both browsers to the same font.
Model: opus-5-5
PASS
Model: opus-5-5