Skip to content

[2.x] fix: restore text-overflow: ellipsis on long button labels - #4628

Merged
imorland merged 1 commit into
2.xfrom
im/button-label-ellipsis
May 6, 2026
Merged

[2.x] fix: restore text-overflow: ellipsis on long button labels#4628
imorland merged 1 commit into
2.xfrom
im/button-label-ellipsis

Conversation

@imorland

@imorland imorland commented May 6, 2026

Copy link
Copy Markdown
Member

Summary

Restores text-overflow: ellipsis on long button labels — regressed in #4174 when display: flex; flex-direction: column; was added to .Button-label to stack helper text below the label.

Flex containers don't honor text-overflow: ellipsis on themselves, so labels stopped truncating and started overflowing their containers.

Fixes #4621

Changes

Button.less — moved truncation to the inner span:

  • Removed overflow: hidden; text-overflow: ellipsis; from .Button-label.
  • Added the same rules to a new .Button-labelText block — that's the <span> already rendered inside every .Button-label (Button.tsx:122).
  • Added min-width: 0; to .Button-label so the flex chain can shrink below content size when its parent applies shrink force.

Dropdown.less — fix for the SplitDropdown case shown in the issue:

  • The main-action button (.SplitDropdown-button) sits inside a .ButtonGroup, where .ButtonGroup > .Button { flex-shrink: 0 } prevents shrinking. Without overriding that, the button would still grow past the group's max-width: 100%.
  • Added .SplitDropdown-button { min-width: 0; flex-shrink: 1; } scoped under .Dropdown--split, leaving every other ButtonGroup user (post controls, admin permission grids, ExtensionNavButton) unchanged.

Test plan

  • Discussion controls SplitDropdown with a long Reply label (e.g. Polish language pack as a guest, or Reply, but much longer as in the issue) — main button truncates with , dropdown toggle stays at fixed width.
  • SplitDropdown with a short label — appearance unchanged.
  • ExtensionNavButton (admin extension list with long extension name) — still truncates correctly via its existing white-space: nowrap rule.
  • Other ButtonGroup uses (post controls, permission grids) — appearance unchanged.
  • Subscription notification email button row, header dropdowns — sanity check no regressions.

Notes

  • No JS changes; the markup <span class="Button-label"><span class="Button-labelText">…</span>…</span> already exists.
  • Backward compatible — third-party themes that target .Button-label for text styling still work; only the overflow behavior moves to .Button-labelText.

Since #4174 added display: flex to .Button-label (so helper text could
stack below the label), text-overflow: ellipsis stopped working — flex
containers don't honor it on themselves.

Move overflow/text-overflow to the inner .Button-labelText span, and add
min-width: 0 to .Button-label so the flex chain can shrink below content
size when the parent applies shrink force.

For SplitDropdown, the main-action button sits inside a ButtonGroup
where .ButtonGroup > .Button has flex-shrink: 0 — so even with the above,
the button would still grow past the group's max-width. Override
flex-shrink/min-width on .SplitDropdown-button only, leaving other
ButtonGroup uses (post controls, admin permission grids) unchanged.

Fixes #4621
@imorland
imorland requested a review from a team as a code owner May 6, 2026 15:12
@imorland imorland added this to the 2.0.0-rc.2 milestone May 6, 2026
@imorland
imorland merged commit 03adb0f into 2.x May 6, 2026
24 checks passed
@imorland
imorland deleted the im/button-label-ellipsis branch May 6, 2026 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

text-overflow: ellipsis doesn't work for .Button-label bacouse of display: flex;

1 participant