From ad014ecdc174eb485f857b678218619ded8098cc Mon Sep 17 00:00:00 2001 From: Mikhail Yenuchenko Date: Tue, 11 Aug 2026 22:58:45 +0300 Subject: [PATCH] panel: centre status badge text optically 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 --- CHANGELOG.md | 4 ++++ internal/web/view/static/panel.css | 16 +++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f25337f..91a8926 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/internal/web/view/static/panel.css b/internal/web/view/static/panel.css index 69139db..b8d878e 100644 --- a/internal/web/view/static/panel.css +++ b/internal/web/view/static/panel.css @@ -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;