Repository navigation
[6.x] Fix spacing between wrapped combobox chips - #15708
Merged
Merged
Conversation
- Each chip had its own mt-2 on top of the row's gap-2, so wrapped rows sat 16px apart while chips side by side were 8px apart - The space above the chips now goes on the row, once, and only when something's selected - It's 10px rather than 8px, to clear the input's shadow
- The validation rules builder uses the same chip row as the combobox, so it had the same 16px gap between wrapped rows
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
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.
Description of the Problem
When a multi-select or Taggable field has enough selections to wrap onto more than one line, the rows of chips sit twice as far apart as the chips do side by side. With a lot of tags it ends up looking loose and a bit broken.
It happens because each chip has its own top margin, and the row also has a gap. On the first line that's fine, but every wrapped line gets the margin and the gap stacked on top of each other.
What this PR Does
Moves the top margin off each chip and onto the row, so it only applies once, above the first line. Wrapped lines then just get the gap, so the spacing is the same in both directions.
I went with this rather than keeping the margin on each chip and dropping the vertical gap, because it separates the two jobs. The gap controls the spacing between chips, and the margin controls how far the chips sit below the field. That let me give the first line a little more room (10px rather than 8px) so it clears the input's shadow, without making wrapped rows any looser. The margin is only added when something's selected, so an empty field doesn't gain any extra space.
The validation rules builder in field settings uses the same chip row, so I've made the same change there.
Before / After
How to Reproduce