Skip to content

Allow buttons to grow and wrap with long or multi-line content#7563

Open
lacatoire wants to merge 1 commit intoEasyCorp:4.xfrom
lacatoire:fix/button-min-inline-size-block-size
Open

Allow buttons to grow and wrap with long or multi-line content#7563
lacatoire wants to merge 1 commit intoEasyCorp:4.xfrom
lacatoire:fix/button-min-inline-size-block-size

Conversation

@lacatoire
Copy link
Copy Markdown
Contributor

Fixes #7303.

Buttons used a fixed block-size and min-inline-size: max-content, which clipped multi-line or long labels and broke the .text-wrap utility. Switching to min-block-size lets buttons grow vertically while preserving the default height for single-line content, and removing min-inline-size: max-content lets .text-wrap actually wrap the label inside tight containers.

Three CSS lines changed in assets/css/easyadmin-theme/buttons.css:

  • .btn: block-size -> min-block-size, drop min-inline-size: max-content
  • .btn-lg: block-size -> min-block-size

Regression checks performed locally with Chromium:

  • Default, sm and lg buttons keep their previous heights (32/28/40 px) for short single-line labels.
  • Icon-only buttons render unchanged.
  • Multi-line labels (with <br>) now fit inside the button instead of being clipped.
  • .text-wrap now wraps the label and grows the button vertically, as intended.

@lacatoire lacatoire force-pushed the fix/button-min-inline-size-block-size branch from bf0ba2b to ae1d031 Compare April 20, 2026 13:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant