rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: an icon button is the same height as the button beside it

Browse source 
The Details/Open pair on every archive card came out 36px beside 28px.

Mantine gives ActionIcon a size scale unrelated to Button's, and defaults
the two differently:

    size        xs    sm    md    lg    xl   default
    Button      30    36    42    50    60   sm (36)
    ActionIcon  18    22    28    34    44   md (28)

So the two never matched, at any size, and every toolbar mixing them was
ragged -- the archive card is just where it shows most.

Mantine already ships the aligned scale as `--ai-size-input-*`, for an
ActionIcon standing beside an Input; those five values are identical to
`--button-height-*`.  ui.css points one at the other, which fixes every
size at once including ones no call site uses yet, and IconButton now
defaults to `sm` like Button.

Both halves are needed and both are proven so: dropping just the `sm`
remap reddens the default and `sm` cases while xs/md/lg/xl stay green;
reverting just the default reddens the default case alone, at 42 vs 36 --
the mismatch inverted rather than fixed.

A further test pins the direction.  The pair could also be squared up by
cutting the labelled button down to 28px, which would be the wrong fix.

Gallery gains a row of Button/IconButton pairs at all five sizes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Roland 2026-08-02 11:16:33 -06:00
parent 687b41bf20
commit bfb2e71d02
No known key found for this signature in database
GPG key ID: 1BA620CE6C9A4680
4 changed files with 101 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/src/components/ui/ui.css
View file

@ -102,6 +102,28 @@ html[data-theme="night"] .wrolpi-button-danger:hover:not(:disabled) {
/* The icon inside inherits currentColor, so it follows without another rule. */
/*
* An icon button is the same height as a labelled one, so a group of them lines up.
*
* Mantine gives ActionIcon a size scale unrelated to Button's -- `sm` is 22px against a
* button's 36px -- which left the Details/Open pair on every archive card ragged, and any
* other toolbar that mixes the two. It already ships the aligned scale as
* `--ai-size-input-*`, for an ActionIcon standing beside an Input; those five values are
* identical to `--button-height-*`. Pointing one at the other fixes every size at once,
* including ones no call site uses yet.
*
* The `html` prefix is load-bearing. Mantine declares this scale on ActionIcon's own
* hashed class, which has the same specificity as `.mantine-ActionIcon-root` and would win
* on source order.
*/
html .mantine-ActionIcon-root {
--ai-size-xs: var(--ai-size-input-xs);
--ai-size-sm: var(--ai-size-input-sm);
--ai-size-md: var(--ai-size-input-md);
--ai-size-lg: var(--ai-size-input-lg);
--ai-size-xl: var(--ai-size-input-xl);
}
/* ----------------------------------------------------------- Theme picker */
.wrolpi-theme-picker {