fix: vertically center icons within icon buttons (#2734)
Menu icons sit visibly high inside their round buttons in the iOS companion app, and one pixel high everywhere else. The card's icon wrapper (`advanced-camera-card-icon`) is slotted into `ha-icon-button`, whose label renders slotted content inside a plain `<span>`. The wrapper is an `inline-block`, so it rides the text baseline and leaves the font's descender space underneath it: the span grows taller than the icon (measured: 24.5px around a 22.5px icon under Roboto), the button's flex layout centers the *span*, and the icon lands high by half the descent. That descent is a property of the active font, which is why the offset differs per platform: about 1px under Roboto, and about 2px when the font stack resolves to a system font, as on iOS, where it is clearly visible inside the round menu button background. Slotted Home Assistant icons do not show this because they are laid out block-level via `--ha-icon-display`, which the card already sets; the card's own wrapper element reintroduces the inline-block one level up. **Change:** lay the wrapper out block-level wherever it is slotted into `ha-icon-button` (`button.scss`, which also covers the submenu and next/previous controls). Block layout has no baseline, so the label span shrinks to exactly the icon and the icon centers. **Verification:** - The structure (flex button, label span, slotted icon) rebuilt standalone in Playwright Chromium and WebKit: with an inline-block icon the offset is 1px under Roboto and 1.75 to 2px under system fonts, in both engines; with a block icon it is 0.0px in every engine, font, and button size tried. - Measured on a live HA 2026.8.3 dashboard (45px menu buttons): before, every menu icon center sat 1px above its button center; after, 0.0px for both a standard menu button and a conditional `advanced-camera-card-menu-icon` element. - `yarn run test`, `yarn run test:browser` (chromium), `yarn run lint`, `yarn run typecheck` pass. --------- Co-authored-by: dermotduffy <dermot.duffy@gmail.com>
This commit is contained in:
@@ -10,3 +10,9 @@ ha-icon-button {
|
|||||||
/* Buttons can always be clicked */
|
/* Buttons can always be clicked */
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ha-icon-button advanced-camera-card-icon {
|
||||||
|
// Inline-level boxes sit on a line of text, where the button label's font
|
||||||
|
// reserves space below the line and pushes the icon off-center.
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user