fix(ui-react): make app bar responsive and keep triggers labeled#6403
Merged
gustavosbarreto merged 3 commits intoJun 3, 2026
Merged
Conversation
The dropdown was positioned against its trigger button, which sits inset from the viewport edge, so the right-aligned panel spilled off the left side on narrow screens. Anchor it to the full-width header below `sm` via `sm:relative` and clamp with `max-w-full` so it cannot exceed the viewport.
Hide the namespace name below `md` to save header width. Because that text was the trigger's accessible name, hiding it would leave an unlabeled icon button (no name at all in the admin variant), so add `aria-label` plus `aria-haspopup`/`aria-expanded` to keep the control labeled.
Hide the username below `sm` to save header width. Since that text was the trigger's accessible name, add `aria-label` plus `aria-haspopup`/ `aria-expanded` so the avatar-only button stays labeled.
|
Claude finished @luizhf42's task in 10s —— View job Code Review CompleteReviewed 3 files across code quality, security, testing, language patterns, and architecture — no issues found. The code looks good as-is. If you push additional changes and want a new review, tag |
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
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.
What
The app bar adapts to narrow viewports: the invitations dropdown no longer overflows horizontally, and the namespace and user-menu triggers collapse to icon-only without losing their accessible names.
Why
On narrow screens the header was crowded and the invitations panel overflowed off the left edge. The panel was anchored to its trigger button, which sits inset from the viewport's right edge (the support and user-menu buttons are to its right), so a right-aligned
w-80dropdown grew leftward off-screen. Widening it only pushed it further off-screen.Changes
sm, the container drops tosm:relativeso the panel anchors to the full-width<header>instead of the inset button, andmax-w-fullcaps its width (sm:max-w-nonerestores the desktopw-80). A right-pinned panel that can never exceed the viewport makes overflow impossible. Picked overposition: fixedbecause the header shifts down when a connectivity/license banner shows, and a viewport-fixed panel would detach from it.Admin Consolelabel belowmd, leaving the initials/icon. Addedaria-label,aria-haspopup, andaria-expandedso the collapsed trigger keeps an accessible name — without it the admin variant would be an unlabeled icon button.sm, leaving the avatar, with the samearia-label/aria-haspopup/aria-expandedtreatment so the avatar-only button stays labeled.Testing
Resize across the
sm(640px) andmd(768px) breakpoints. Confirm the invitations panel opens fully on-screen at ~360px, the namespace name returns atmd, and the username atsm. With a screen reader, verify each trigger announces a name at every width — especially the admin-console variant.