Skip to content

fix(ui): the wrong typeface on half the numbers, and a highlight nobody ever saw - #19

Merged
meocong merged 1 commit into
masterfrom
ui/type-and-depth
Aug 14, 2026
Merged

fix(ui): the wrong typeface on half the numbers, and a highlight nobody ever saw#19
meocong merged 1 commit into
masterfrom
ui/type-and-depth

Conversation

@meocong

@meocong meocong commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Four defects found by looking at the app rather than at the tests, which passed on every one of them.

Vietnamese set in a monospaced face

.tabular set font-family: var(--font-mono) as well as font-variant-numeric, and it had been applied to every string that merely contained a number — "1 giờ 12 phút" on the home and analytics screens, "hạn 2026-08-20" on a task, "3 công cụ" under an agent, the counts on every chip and in the finder. Those rendered in JetBrains Mono beside Inter everywhere else. Tone marks sit badly in it and the words read as a fallback font that had failed to load.

Split in two. .tabular keeps the mono face for a column of digits and nothing else — a clock beside a transcript line, a playhead, a date on its own. .nums gives the same steady figures without changing the typeface under the words around them. Twenty sites moved.

The selected sidebar row had no highlight

There is a layoutId pill meant to travel between rows. It is -z-10 so the label paints over it, but the button created no stacking context, so that negative index escaped and the pill painted behind the sidebar's own background. Invisible since the component was written; the selected row was green text and nothing else. One isolate.

Recording red failed AA against its own tint

#f2585b on rgba(242,88,91,0.1) measures 4.35:1, which shots.mjs had been reporting on every run for the refused-permission chip. Raised to #fb6b70 — 5.1:1, and in the same pastel family as the accent and the assistant violet rather than beside them.

The capture card was a picture of a dead meter

Forty motionless grey bars across a third of the home screen. They now breathe: a tenth of the amplitude of the live waveform, four times the period, findable only if you look for it, and stopped by prefers-reduced-motion like everything else.

Also

  • One .lift class replaces two hand-rolled hover treatments, so a card that can be clicked says so before it is.
  • Ticker counts a plain integer up on arrival, so a figure on the home or analytics screen reads as measured rather than as placeholder text. It refuses anything that is not a bare integer — rolling "1 giờ 12 phút" through intermediate states would spell out nonsense on the way.

Verification

All 44 screenshots re-shot in both schemes: no overflow, contrast AA everywhere, and the previously-reported failure gone. 297 unit tests and all 18 browser suites green.

🤖 Generated with Claude Code

…dy ever saw

Four defects, all of them things you can only find by looking at the app rather than at
the tests, which passed on every one of them.

**Vietnamese set in a monospaced face.** `.tabular` set `font-family: var(--font-mono)`
as well as `font-variant-numeric`, and it had been applied to every string that merely
*contained* a number: "1 giờ 12 phút" on the home screen and the analytics cards, "hạn
2026-08-20" on a task, "3 công cụ" under an agent, the counts in the finder and on every
chip. Those rendered in JetBrains Mono beside Inter everywhere else — tone marks sit badly
in it and the words read as a fallback font that had failed to load. Split in two:
`.tabular` keeps the mono face for a column of digits and nothing else (a clock beside a
transcript line, a playhead, a date on its own), and `.nums` gives the same steady figures
without changing the typeface under the words around them. Twenty sites moved.

**The selected sidebar row had no highlight.** There is a `layoutId` pill that is supposed
to travel between rows; it is `-z-10` so the label paints over it, but the button created
no stacking context, so that negative index escaped and the pill painted behind the
sidebar's own background. Invisible since the component was written — the selected row was
green text and nothing else. One `isolate`.

**Recording red failed AA against its own tint.** `#f2585b` on `rgba(242,88,91,0.1)`
measures 4.35:1, which the screenshot audit had been reporting on every run for the
refused-permission chip. Raised to `#fb6b70`: 5.1:1, and in the same pastel family as the
accent and the assistant violet rather than beside them.

**The capture card was a picture of a dead meter.** Forty motionless grey bars across a
third of the home screen. They now breathe — a tenth of the amplitude of the live waveform
and four times the period, findable only if you look for it, and stopped by
`prefers-reduced-motion` like everything else.

Beyond the fixes: one `.lift` class replaces the two hand-rolled hover treatments so a card
that can be clicked says so before it is, and `Ticker` counts a plain integer up on arrival
so a figure on the home or analytics screen reads as measured rather than as placeholder
text. It refuses anything that is not a bare integer — rolling "1 giờ 12 phút" through
intermediate states would spell out nonsense on the way.

Verified by re-shooting all 44 screenshots in both schemes: no overflow, contrast AA
everywhere, and the previously-reported failure gone. 297 unit tests and all 18 browser
suites green.
@meocong
meocong merged commit 2547e01 into master Aug 14, 2026
10 checks passed
@meocong
meocong deleted the ui/type-and-depth branch August 14, 2026 15:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant