Skip to content

Commit 779e48d

Browse files
committed
fix: restore text-overflow: ellipsis on long button labels
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
1 parent 89d8015 commit 779e48d

2 files changed

Lines changed: 9 additions & 2 deletions

File tree

framework/core/less/common/Button.less

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -272,10 +272,13 @@
272272
}
273273
.Button-label {
274274
line-height: inherit;
275-
overflow: hidden;
276-
text-overflow: ellipsis;
277275
display: flex;
278276
flex-direction: column;
277+
min-width: 0;
278+
}
279+
.Button-labelText {
280+
overflow: hidden;
281+
text-overflow: ellipsis;
279282
}
280283
.Button-helperText {
281284
font-size: 0.73rem;

framework/core/less/common/Dropdown.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@
119119

120120

121121
.Dropdown--split {
122+
.SplitDropdown-button {
123+
min-width: 0;
124+
flex-shrink: 1;
125+
}
122126
.Dropdown-toggle .Button-icon {
123127
display: none;
124128
}

0 commit comments

Comments
 (0)