[2.x] fix: let gambit suggestions wrap instead of running off the dropdown - #4888
Merged
Conversation
Dropdown items are laid out as single lines and ellipsised, which is right for a menu of commands but not for the gambit rows in the search modal. Those rows document the query syntax, and the value shown against `is:` is every boolean gambit joined into one string — it grows with each extension that registers one, so there is no width at which truncating it stays useful. On a forum with a handful of extensions installed the row was already being cut off mid-word. The row now wraps. `white-space`, `overflow` and `text-overflow` are reset alongside the defaults they override so the two are read together; the generic rule matches on two classes and two elements, so a reset declared further down the file on the class alone would have lost the cascade and silently done nothing. Wrapping then needs the flex containers to allow it: a flex item will not shrink below the intrinsic width of its text without `min-width: 0`, and the key and value need `flex-wrap` to move onto separate lines. The key keeps its own line, since it is the label the row is identified by. Now that a row can be taller than one line, the alignment shifts from centre to the first line so the key, its value and the add/negate buttons all sit on the same baseline rather than floating against the middle of a wrapped block.
imorland
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The
is:row in the search modal was cut off mid-word:.Dropdown-menu > li > a, > button, > spansetswhite-space: nowrap,overflow: hiddenandtext-overflow: ellipsis. That is right for a menu of commands, but the gambit rows document the query syntax, and the value againstis:is every boolean gambit joined into one string — it grows with each extension that registers one, so no width makes truncation useful. Any forum with a few extensions installed hits it.What changed
The reset is declared inside the block it overrides, next to the other
&.modifiers. That placement is the substance of the fix rather than tidiness: the generic selector matches on two classes and two elements, so the same declarations written against.GambitsAutocomplete-gambitalone lose the cascade and do nothing at all. Compiled output confirms the override resolves to.Dropdown-menu > li > span.GambitsAutocomplete-gambit, winning on specificity and source order.Wrapping then needs the flex containers to permit it:
min-width: 0on the button — a flex item will not shrink below its text’s intrinsic width without it, so the row pushed out of the panel rather than wrapping inside itflex-wrap: wrapso the key and value can occupy separate linesflex-shrink: 0on the key, which is the label the row is identified by and keeps its lineoverflow-wrap: break-wordon the value, so a single over-long token breaks rather than escaping the panelcentertoflex-start/baseline, because a row can now be taller than one line and the add/negate buttons should sit on the first line rather than against the middle of a wrapped blockNotes
Only
.GambitsAutocomplete-gambitis affected; every other dropdown item keeps the single-line ellipsis behaviour.Surfaced while looking at a raw translation key in that list (FriendsOfFlarum/gamification#167), but the clipping is independent of it and predates it — the shortened label just moves the cutoff rather than removing it.
Verified by compiling
less/common/Dropdown.lesswithless.phpand reading the emitted CSS, and in the browser.