Skip to content

fix(ui): constrain compactSelect to the main section per default#104245

Merged
TkDodo merged 7 commits intomasterfrom
tkdodo/fix/de-569-select-too-wide
Dec 3, 2025
Merged

fix(ui): constrain compactSelect to the main section per default#104245
TkDodo merged 7 commits intomasterfrom
tkdodo/fix/de-569-select-too-wide

Conversation

@TkDodo
Copy link
Copy Markdown
Collaborator

@TkDodo TkDodo commented Dec 2, 2025

Here’s what I found out:

  • react-aria correctly calculates a maxWidth depending on the items we have in the list and the container it is “constrained” to.
  • The constraining element can be set via preventOverflowOptions.boundary
  • additionally, we could set a menuMaxWidth (we did that in 4 places only)

In this PR, we:

  • set the boundary to the main element if not provided
  • add a calc expression to get this down to 90% of the total width of that (as react-aria will just use the full space available otherwise)

With that, we should get a good, unified rendering of the compactSelect menu that never gets too large. I have therefore removed the menuMaxWidth prop, as I don’t think users should need to set that.

before:

Screenshot 2025-12-02 at 15 43 46

after:

Screenshot 2025-12-02 at 16 03 04

@linear
Copy link
Copy Markdown

linear bot commented Dec 2, 2025

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 2, 2025
@TkDodo TkDodo marked this pull request as ready for review December 2, 2025 17:04
@TkDodo TkDodo requested a review from a team December 2, 2025 17:04
@TkDodo TkDodo requested review from a team as code owners December 2, 2025 17:04
@TkDodo TkDodo merged commit d53c253 into master Dec 3, 2025
49 checks passed
@TkDodo TkDodo deleted the tkdodo/fix/de-569-select-too-wide branch December 3, 2025 10:26
@github-actions github-actions bot locked and limited conversation to collaborators Dec 18, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants