fix(navbar): keep user dropdown on one line and reveal navbar border#1140
Open
JeanMarcMilletScality wants to merge 1 commit into
Open
fix(navbar): keep user dropdown on one line and reveal navbar border#1140JeanMarcMilletScality wants to merge 1 commit into
JeanMarcMilletScality wants to merge 1 commit into
Conversation
The right-action dropdown trigger used height: auto with no nowrap, so a long username wrapped to two lines and grew past the navbar height, breaking vertical alignment. Its solid navbarBackground fill also hid the navbar's bottom border. Pin the trigger to navbarHeight with white-space: nowrap, truncate the label with an ellipsis (max-width + overflow), and drop the background fill so the border stays visible. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Problem
A long username in the navbar's right-action dropdown wrapped to two lines and grew taller than the navbar, breaking vertical alignment. The trigger's solid
navbarBackgroundfill also covered the navbar's bottom border.Fix
In
NavbarMenuItem .sc-dropdown .trigger(Navbar.component.tsx):navbarHeightand addwhite-space: nowrapso it never wraps..sc-trigger-text):display: block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis.background-color: navbarBackgroundfill so the navbar's bottom border stays visible.Scope matches the original bug — it applies to
Dropdown-type right actions (the username case), whose trigger text carries.sc-trigger-text.Verification
NavbarWithLongUserNameStorybook story added for visual review.tsc --noEmitclean; ESLint clean.🤖 Generated with Claude Code