Repository navigation
fix(settings): Widen the project select menu in settings-v3 - #129651
Merged
priscilawebdev merged 13 commits intoNov 3, 2026
Merged
Conversation
The project CompactSelect in the settings navigation pinned its menu to the width of the sidebar trigger, so longer project slugs were ellipsified. Use a 320px menu min-width instead so the menu can grow wider than the trigger.
github-actions
Bot
added
the
Scope: Frontend
Accept minWidth, maxWidth, and extraWidth options in getMenuWidthForLabels so it is not tied to the project page filter's sizing. Use it in EnvironmentPageFilter with its existing 16-24em bounds and 6em extra width, and memoize the width in the settings project selector. Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
React Compiler is enabled for application code, so the explicit memo is redundant. Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
The 22-28em defaults were sized for the project page filter, so pass them at each call site instead of baking them into the shared helper. Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
Every caller now gets the same 22-28em range with 12em extra width, so the helper takes only the labels. This widens the environment page filter menu, which previously used 16-24em with 6em extra width. Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
Options with only a leading item and a label, like the environment filter and the settings project selector, get 16-24em with 6em extra width. The project page filter has bookmark and settings buttons on each option, so it opts into 22-28em with 12em extra width. Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
Replace getMenuWidthForLabels and its hasTrailingActions flag with getMenuWidthForOptions, which reads label text and trailingItems from the options themselves. Options with trailing items get the wider 22-28em sizing. Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
Drop the shared menu width helper and give the settings project select a fixed 24em menu, matching the environment page filter's max width.
priscilawebdev
marked this pull request as ready for review
November 3, 2026 10:15
TkDodo
approved these changes
Nov 3, 2026
This branch was successfully deployed
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.
With the `settings-v3` flag enabled, the project `CompactSelect` in the settings navigation used `menuWidth="100%"`, which pinned the menu to the narrow sidebar width and caused project slugs to be ellipsified.
This fixes the issue, but I would like to rethink this logic.
closes DE-1800