fix(scraps): align leadingItems in compactSelect with check box/icon#106167
Merged
fix(scraps): align leadingItems in compactSelect with check box/icon#106167
Conversation
github-actions
bot
added
the
Scope: Frontend
TkDodo
commented
Jan 13, 2026
| const checkboxSize = size === 'xs' ? 'xs' : 'sm'; | ||
|
|
||
| if (hideCheck && !leadingItems) { | ||
| const leading = |
Collaborator
Author
There was a problem hiding this comment.
drive-by refactoring: we weren’t checking the functional syntax of leadingItems in listBox, but gridList did implement it. This just streamlines behaviour.
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
JonasBa
approved these changes
Jan 14, 2026
TkDodo
added a commit
that referenced
this pull request
Jan 27, 2026
…106972) This is the second attempt to fix the alignment, after #106167 was reverted because it introduced an issue in the environment selector. The problem was that, in order to do the alignment, we wrapped the `leadingItems` again in another container, because the internally created checkbox is also wrapped. This fixed the alignment issue, however there are cases where `hideCheck:true` is passed to hide the internal checkbox and then a separate checkbox is rendered inside `leadingItems` 🤯 . This is what `HybridFilter` does, and that checkbox should never get wrapped because of how pointer events are handled. The approach in this PR always just plainly returns the `leadingItems` when `hideCheck` is passed to never do any wrapping. This is also what happened before, but it’s now a bit more explicit. This is the important change: 02cee3c The rest are the exact changes re-applied from the reverted PR. Note: I think `HybridFilter` only does this because it has an option to also show the checkbox on the right side, which is used by the `Project` selector. If we streamline this, like @Jesse-Box has planned, we can probably just use the internal checkbox from `CompactSelect` and remove all of these workarounds.
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
in
compactSelect, we wrap thecheckbox(or check icon) inside aCheckWrapto align it properly with the text. Note that we can’t just usealign-items: 'center'because the text can be multi-line, soflex-startis on purpose.The
leadingItems(which I didn’t know existed forcompactSelecttbh) did not get this alignment, so icons inside it looked off.This PR wraps
leadingItemsin the sameWrapas the check box/icon.before:
after:
