Stu Mason
Stu Mason

Activity

Pull Request Opened

PR #121 opened: fix(ux): nav links + MetricValue lose mono utility via tailwind-merge

What's broken

Two cosmetic regressions caught while verifying prod after #119:

  1. Top nav — `Live` / `Reports` rendered in Instrument Sans body text instead of JetBrains Mono uppercase overline.
  2. Numeric cells — Anywhere `` was used, the number lost its `text-mono` font + tabular-nums and fell back to the parent's font (which in DataTable rows happens to also be `text-mono` so it looked OK, but in StatGrid and inline narrative it didn't).

Root cause

Project-wide `cn()` helper is `twMerge(clsx(inputs))`. Tailwind-merge treats every `text-*` class as part of one conflict group and drops the earlier one when it sees two:

```ts cn('text-overline text-muted ...') // → 'text-muted ...' (text-overline dropped) cn('text-mono text-strong', className) // → 'text-strong' (text-mono dropped) ```

`text-overline` (typography utility) and `text-mono` (font-family + tabular-nums) are both Phase 1 component-layer classes, NOT colour utilities — but twMerge can't know that without config.

The fix

`SmartLink` and `MetricValue` now use raw `clsx` instead of `cn`. The variant strings in those components are deliberate combinations of role-prefixed typography + colour utilities; they don't need de-duping.

Inline note in both files explaining why, so the next person doesn't re-introduce `cn()`.

Verified locally

``` Live → JetBrains Mono, 11px, uppercase, 1.65px letter-spacing ✓ Reports → JetBrains Mono, 11px, uppercase, 1.65px letter-spacing ✓ ```

Test plan

  • `npm run build` clean
  • Post-deploy Playwright: top nav matches breadcrumb mono overline; MetricValue cells have JetBrains Mono w/ tabular-nums in StatGrid + inline.
+27
additions
-13
deletions
2
files changed