mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-09 00:29:22 +00:00
386460afef
## Summary Vertically center button/badge/nav labels by tuning the shared `ppformula-text-center` utility from `top: 0.19em` to `top: 0.1em`. ## The alignment issue PP Formula (our brand font) has asymmetric vertical metrics: its caps sit high in the line box, so a naively centered label looks too high. `ppformula-text-center` compensates by nudging the label down with `position: relative; top: <em>` (a purely visual shift, it does not change the element's box, so button/badge sizes are unaffected). The value was `0.19em`, which **over-corrected**: the glyph ink ended up ~1.4px **below** center on every button, so labels read slightly low. Measuring the actual glyph ink (canvas `measureText` `actualBoundingBox*`) showed ~**0.09-0.10em** centers uppercase labels; `0.1em` lands the ink within ~0.1px of center. ## Why it's safe (verified) This utility is used site-wide (Button, Badge, ButtonPill, ButtonMask, BrandButton, nav triggers, section labels). Because it's a `position:relative` nudge, there is **no layout/box-size change** anywhere. I measured glyph-ink centering across **12 pages** (home, cloud, cloud/pricing, download, careers, customers, demos, enterprise, api, mcp, gallery, learning): - Buttons/badges/pills went from ~1.37px low to **~0.11px** (centered). - **Nothing regressed** (no element pushed too high). - The handful of numeric "outliers" were `text-transform: uppercase` measurement artifacts (source text with descenders that don't render); confirmed visually as centered. ## Changes - **What**: `apps/website/src/styles/global.css` — `ppformula-text-center` `top: 0.19em` → `0.1em` (one line). --------- Co-authored-by: github-actions <github-actions@github.com>