Skip to content

ui: collapsed rail hides identity footer; mobile bell sheet trapped by NavigationBar glass - #45

Merged
ditto-m[bot] merged 1 commit into
mainfrom
rail-reach
Aug 1, 2026
Merged

ui: collapsed rail hides identity footer; mobile bell sheet trapped by NavigationBar glass#45
ditto-m[bot] merged 1 commit into
mainfrom
rail-reach

Conversation

@ditto-m

@ditto-m ditto-m Bot commented Aug 1, 2026

Copy link
Copy Markdown
Contributor

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-footer was display: none in the collapsed rail (both the pre-hydration and post-hydration CSS blocks). Since v0.43 moved the theme toggle into the UserMenu popover, 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-UserMenu custom footer node 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. NavigationBar always applies backdrop-filter (.etu-glass), which — like transform/filter/perspective — establishes a containing block for position: fixed descendants. 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 in etamong-playground/pages. Fix: the mobile sheet + backdrop now portal to document.body, reusing the same createPortal call the row variant already used.

    • Checked for the same trap elsewhere: the trigger variant's desktop popover is unaffected (position: absolute against the bell's own position: relative wrapper, which wins the containing-block search before reaching any glass ancestor) — left untouched. <MobileTabBar> (the other .etu-glass consumer) renders no position: fixed descendants 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.md for the full "Behavioral notes" section.

Test plan

  • corepack pnpm typecheck
  • corepack pnpm build
  • corepack pnpm test (113 unit tests)
  • corepack pnpm showcase:build
  • CI=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)
  • Manual visual check (Playwright screenshots, light + dark) of the collapsed rail with the UserMenu popover open, and the mobile NavigationBar bell sheet open — both confirmed correctly positioned before shipping
  • Showcase (ChromeSection, App.tsx) already dogfoods both scenarios: the live sidebar footer is <UserMenu variant="full">, and the mobile <NavigationBar trailing> mounts a <NotificationBell> below 720px

Closes etamong-playground/planning#1150
Closes etamong-playground/planning#1151

…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
@ditto-m
ditto-m Bot merged commit c8a4fb0 into main Aug 1, 2026
2 checks passed
@ditto-m
ditto-m Bot deleted the rail-reach branch August 1, 2026 09:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants