[dev-overlay] Expand clickable area for Select component in user preferences #80300
Conversation
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
The clickable area was limited to the text of the selected option, not the entire visible button area. This made the component feel unresponsive. I was unable to directly stretch the select element to expand its clickable area, and so added a span. Initially, an unintended side effect of the change caused the button's width to change dynamically with the selection, losing the stable width behavior of the original select element. To restore this, a hidden `<span>` sets a consistent width based on the longest option.
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
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.
The
Selectcomponent in the User Preferences panel had a clickable area limited to the text of the selected option, not the entire visible button area. This made the component feel unresponsive.We fixed it with some spans and css stuff. Also, the dropdown options are now full-width, which I feel like is an upgrade, due to improved visual consistency. See material design as an example of the full-width selection options:
fixes #80299
What we did to make it clickable:
position: absolute; inset: 0;, thenopacity: 0;so there's no duplicate select text, andcursor: pointer;so that the cursor changes to reflect the element's clickability.spanacting as a strut to have a max width (otherwise the button sizing becomes dynamic), putting them in a div wrapper withdisplay: grid;, then targeting the spans themselves withgrid-area: 1 / 1;so they overlap, then setting the span:first-child (longest element) withvisibility: hidden;so we don't get duplicated text.After:
Before:
Why we decided against
align-items: center; justify-content: flex-start;and just went with the programmatic spans:We'd have to hardcode a bunch of separate padding.
Why we need the
spans and not just theselect:Only adjusting the positions on
selecttakes it out of the document's layout flow. The parent div (.select-button) would then calculate its width based on its remaining in-flow children (the icon and the chevron), causing it to shrink and ignore the space needed for the text.This is a partial continuation of #80025 (dark mode for options), but this change felt separate and extensive enough to warrant its own PR.