ui: collapsed rail hides identity footer; mobile bell sheet trapped by NavigationBar glass - #45
Merged
Conversation
…by NavigationBar glass Two rail/mobile reachability bugs found adopting v0.44 across the fleet — both the same story: the bell and the account menu must actually be reachable in the collapsed rail and on mobile, not just present in the DOM. - Collapsed rail: <Sidebar footer> used to disappear entirely once the rail collapsed to 64px. Since v0.43 moved the theme toggle into the UserMenu popover, that cut off the only path to identity, sign-out, and theme. The canonical <UserMenu variant="full"> footer now degrades to an avatar-only control instead, same ~40px target as other rail items. A non-UserMenu custom footer still collapses to nothing (can't safely rewrite unknown markup at 64px). - Mobile bell sheet: NotificationBell's default trigger-variant mobile sheet wasn't portaled to document.body, only the row variant was. NavigationBar always applies backdrop-filter, which establishes a containing block for position:fixed descendants just like transform/filter — so a bell mounted in <NavigationBar trailing> had its sheet anchored to the header instead of the viewport bottom. Portals the sheet + backdrop now, reusing the row variant's existing createPortal call. Checked the desktop trigger popover (unaffected — anchors to the bell's own position:relative wrapper, closer than any glass ancestor) and MobileTabBar (renders no fixed descendants) for the same trap. Bumps to 0.45.0. Adds e2e regression coverage for both: rail-collapse footer trigger + popover open, and mobile sheet bounding-box anchored to the viewport bottom instead of the header. Closes etamong-playground/planning#1150 Closes etamong-playground/planning#1151
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.
Summary
Two rail/mobile reachability bugs found while adopting v0.44 across the fleet — both the same underlying story: the bell and the account menu must actually be reachable in the collapsed rail and on mobile, not just present in the DOM.
Collapsed rail hides the identity footer (planning#1150).
.etu-sidebar-footerwasdisplay: nonein the collapsed rail (both the pre-hydration and post-hydration CSS blocks). Since v0.43 moved the theme toggle into theUserMenupopover, that popover's only entry point was the footer — so the collapsed rail had no way to reach identity, sign-out, or the theme toggle. Fix: the canonical<UserMenu variant="full">footer now degrades to an avatar-only control (same ~40px target as other rail items) instead of disappearing. Name/email/badges still hide. A non-UserMenucustomfooternode still collapses to nothing — it can't be safely rewritten to fit 64px without knowing its markup; that rule is now documented in the<Sidebar>doc comment and the CSS comment.Mobile bell sheet trapped by NavigationBar's glass (planning#1151).
NotificationBell's default"trigger"variant renders its mobile sheet without a portal.NavigationBaralways appliesbackdrop-filter(.etu-glass), which — liketransform/filter/perspective— establishes a containing block forposition: fixeddescendants. A bell mounted in<NavigationBar trailing>(the documented mobile placement) had its sheet anchored to the header instead of the viewport, confirmed by bounding-box measurement inetamong-playground/pages. Fix: the mobile sheet + backdrop now portal todocument.body, reusing the samecreatePortalcall the row variant already used.position: absoluteagainst the bell's ownposition: relativewrapper, which wins the containing-block search before reaching any glass ancestor) — left untouched.<MobileTabBar>(the other.etu-glassconsumer) renders noposition: fixeddescendants of its own.<UserMenu>'s dropdown and the cmdk<CommandPalette>dialog were already unconditionally portaled.Bumped to 0.45.0 (minor, additive/behavioral-fix only — no prop removals or renames). See
CHANGELOG.mdfor the full "Behavioral notes" section.Test plan
corepack pnpm typecheckcorepack pnpm buildcorepack pnpm test(113 unit tests)corepack pnpm showcase:buildCI=1 corepack pnpm e2e(16 Playwright tests, including two new regressions: rail-collapse footer trigger + popover, and mobile sheet bounding-box anchored to the viewport bottom)UserMenupopover open, and the mobileNavigationBarbell sheet open — both confirmed correctly positioned before shippingChromeSection,App.tsx) already dogfoods both scenarios: the live sidebar footer is<UserMenu variant="full">, and the mobile<NavigationBar trailing>mounts a<NotificationBell>below 720pxCloses etamong-playground/planning#1150
Closes etamong-playground/planning#1151