Skip to content
This repository was archived by the owner on Aug 6, 2026. It is now read-only.

fix(code): Restore named leading-* utilities to fix oversized badges - #2139

Merged
Twixes merged 2 commits into
mainfrom
posthog-code/fix-tag-line-height
May 13, 2026
Merged

Twixes merged 2 commits into
mainfrom
posthog-code/fix-tag-line-height

Conversation

@Twixes

@Twixes Twixes commented May 13, 2026 •

Copy link
Copy Markdown
Contributor

What

Tag badges ([Alpha], P1, etc.) ballooned from ~17px to ~26px tall.

Why

radix-themes-tw's preset replaces (not extends) Tailwind's lineHeight scale, so leading-tight / leading-snug / leading-normal / leading-relaxed / leading-loose silently stopped compiling. Badge's !leading-tight override became a no-op, and Radix's --line-height-1 (overridden to 20px in globals.css) took over.

Fix

Re-add the named tokens via theme.extend.lineHeight so they merge with the Radix scale instead of replacing it.

Also: one-line SessionView cleanup to unblock pnpm typecheck (TS2451 on main from #1971).


Created with PostHog Code

Twixes added 2 commits May 13, 2026 21:27
`isOnline` is already pulled from `useConnectivity()` earlier in the same
component (line 136 in current HEAD), so the second destructure was a
TS2451 redeclaration error that broke `pnpm typecheck`.

Generated-By: PostHog Code
Task-Id: 65a3c8df-1230-49a9-b67d-f530f154e8f4
`radix-themes-tw` overrides Tailwind's `lineHeight` scale to a numeric `1…9`
mapping (one entry per Radix line-height token). Because that replaces
rather than extends the default scale, named utilities like `leading-tight`,
`leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose`
silently stop compiling — Tailwind v4 doesn't emit the rule, so the
className becomes a no-op.

Most visible fallout: `Badge` uses `!leading-tight` to clamp the badge's
line-height to 1.25× the 9px text. Without that override applying, content
inherited Radix's `--line-height-1` (overridden to 20px in globals.css),
so every `[Alpha]`, `P1`, status, etc. tag rendered at ~26px instead of
~17px. Other parts of the app silently lost intended `leading-relaxed` /
`leading-normal` styling too.

Re-add the named tokens via `extend.lineHeight` so they merge with the
Radix preset's numeric scale instead of being replaced.

Generated-By: PostHog Code
Task-Id: 65a3c8df-1230-49a9-b67d-f530f154e8f4
@Twixes Twixes changed the title fix(code): restore named leading-* utilities to fix oversized badges fix(code): Restore named leading-* utilities to fix oversized badges May 13, 2026
@Twixes
Twixes marked this pull request as ready for review May 13, 2026 21:34
@greptile-apps

greptile-apps Bot commented May 13, 2026

Copy link
Copy Markdown
Contributor

Reviews (1): Last reviewed commit: "fix(code): restore named leading-* utili..." | Re-trigger Greptile

@Twixes
Twixes requested review from adamleithp and corywatilo May 13, 2026 21:35

@adamleithp adamleithp left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this happened because of Quill, and were competing for tailwind defaults. I'll approve, but I don't think this is the answer, we should move away from these badges and use quill (and modify quill for these variants you want)

@Twixes
Twixes merged commit decdc35 into main May 13, 2026
15 checks passed
@Twixes
Twixes deleted the posthog-code/fix-tag-line-height branch May 13, 2026 22:03
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants