panel: centre status badge text optically
test / test (push) Has been cancelled

IBM Plex Mono sits low in its em square; top-heavy badge padding left
ok/warn sunk below the adjacent heading. Bottom padding is now heavier.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-11 22:58:45 +03:00
parent de6f7a88da
commit ad014ecdc1
2 changed files with 11 additions and 9 deletions
+4
View File
@@ -7,6 +7,10 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
### Fixed
- panel: status badge text sat low in the box (and below the heading or label
beside it). IBM Plex Mono sits low in its em square; the previous top-heavy
padding made that worse. Bottom padding is now heavier so the word centres
optically.
- panel: the **Users** navigation icon was two full silhouettes with staggered
baselines, so the pair looked lopsided at 16 px. The rear person is now a
right-side crescent (head + shoulder) behind a full front silhouette aligned
+7 -9
View File
@@ -485,16 +485,14 @@ button.danger:hover, a.danger:hover { background: var(--danger-fill-hover); }
the pill's own emphasis — dropped with the pill, since the colour already
says how loud the badge is. */
/* line-height 1 and the padding doing the centring, rather than the 1.5 the
badge would inherit from the body. In a tall line box a word of lowercase
with no descender — ok, warn, unknown — sits above the optical centre of the
space around it, and inside a bordered box that reads as text stuck to the
top. With the box hugging the line, the padding is what centres the word, and
it is uneven on purpose: the extra tenth at the top pays for the descender
space every line box reserves below the baseline and these words rarely use.
The one that does use it, queued, keeps the same box — the tail hangs into
the bottom padding rather than growing the badge. */
badge would inherit from the body. IBM Plex Mono sits a shade low in its em
square, so equal padding leaves "ok" / "warn" sunk in the box (and visibly
below the heading or label it sits next to). The bottom padding is therefore
heavier than the top — enough to lift the word to the optical centre. A
top-heavy pad was tried earlier and made the sink worse. Words with a
descender (queued) hang into that bottom pad rather than growing the badge. */
.st {
display: inline-block; padding: 0.28rem 0.45rem 0.2rem; border-radius: 4px;
display: inline-block; padding: 0.14rem 0.45rem 0.28rem; border-radius: 4px;
font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; line-height: 1;
letter-spacing: 0.02em;
vertical-align: middle; border: 1px solid transparent;