InputButton: icon-only button outgrows --button-min-height when --input-icon-size is above 1.8rem #22

What happens

An icon-only InputButton (the #iconOnly slot) is sized as the icon plus a fixed margin, not from --button-min-height:

/* app/components/05.forms/input-button/InputButton.vue, [data-icon-only] */
aspect-ratio: 1;
padding: 0;
& .input-button-icon {
  margin: 1.2rem;
}

So its size is --input-icon-size + 2.4rem + 2 × border. With the default --input-icon-size: 1.8rem that comes to exactly 4.4rem, matching --button-min-height (--input-min-height), so it looks right. Raise the icon size and the button grows past the min height:

The margin is hard-coded, so a consumer can't keep the button at the standard height with a bigger icon.

Where it showed up

fill-me-in (layer 9.8.0) sets --input-icon-size: 2.4rem for the eject and dealer icon buttons in its player list. Its rows have min-block-size: var(--input-min-height) so they all line up, but rows with an eject button came out 50px tall and rows without one 44px. The app worked around it by sizing its rows from calc(var(--input-icon-size) + 2.6rem), which ties it to the layer's private margin.

Expected

An icon-only button stays the same height as a text button (--button-min-height) whatever --input-icon-size is. The icon stays centred, and only grows the button once it no longer fits.

Possible fix

Size the square from the min height and centre the icon, rather than adding a margin around it. For example, min-inline-size: var(--button-min-height) plus centring on [data-icon-only], with the icon margin dropped or tokenised (for example --button-icon-only-padding). Add a story with an enlarged --input-icon-size next to a text button and an input, so the heights can be compared, and document the behaviour in CONSUMER-STYLING.md.

Once fixed, fill-me-in can drop its --game-player-button-size workaround in GamePlayerList.vue.