fix(theme): state .pill's line-height so a button pill matches a link pill

The public header's dropdown trigger is a <button class="pill"> sitting in a row
of <a class="pill"> links, and it rendered ~7px shorter.

It was not failing to pick up the theme: font-size, font-family, padding, border
and box-sizing all matched exactly. The one property that differed was
line-height, because form controls do not inherit it — the UA stylesheet gives
<button> `line-height: normal` (~1.15), while the anchors inherited body's 1.6.
38.02px against 31px, which is precisely 22.016 - 15.8.

Stating it on .pill fixes it at the source rather than patching the one button:
every other property in that rule is already explicit for the same reason, and
this was the remaining gap. The value matches body's 1.6, so no link pill
changes. The ~70 <button class="pill"> elsewhere in the admin gain the same 7px
and now line up with the .btn buttons they sit beside.

.btn has the same latent difference and is deliberately left alone: it is used on
80 buttons and 2 anchors, they never appear on the same row, so nothing is
visibly wrong and the blast radius is not worth it.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-08-08 00:56:50 -05:00
parent b517d7b2df
commit 15cefe5ea1

View File

@@ -190,6 +190,14 @@ a.card:focus-visible {
background: rgba(11, 22, 48, 0.5);
font-family: var(--sans);
font-size: 0.86rem;
/* Stated, not inherited. A <button class="pill"> would otherwise take the UA
stylesheet's `line-height: normal` — form controls do not inherit it from
body — and come out ~7px shorter than an <a class="pill"> beside it. Every
other property here is already explicit for the same reason; this was the
one gap, and it only became visible once the public header put a button
pill (a dropdown trigger) on the same row as the link pills. Matches
body's 1.6, so no link pill changes. */
line-height: 1.6;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;