[clubanderson]

Closes #12192

Problem

On the phone layout of the spoke dashboard (iPhone Safari, 9ab9808 on v5 :candidate) every navbar chip opens its popover except the user avatar — tapping it does nothing.

Root cause

Two independent defects:

1. No click on tap. The trigger was a bare <img data-action="toggleGHUserMenu"> relying on the delegated document click listener. WebKit/iOS Safari only synthesises click from a tap on interactive elements; the <img> received touchstart/touchend/pointerup but never click, so toggleGHUserMenu() never ran. Reproduced in Playwright WebKit (390×844, touch): tapping a <button> fires click, tapping the avatar <img> does not.
2. Clipped dropdown. Under @media (max-width: 768px) and the coarse-pointer landscape block, .oc-topbar-right { overflow: hidden } makes the chip strip scroll, and the position: absolute .avatar-menu inside #oc-gh-avatar-wrap was clipped away entirely — even in Chromium where the toggle did fire, the menu was invisible.

Fix

• Wrap the avatar in a real <button type="button" id="oc-gh-avatar-btn" data-action="toggleGHUserMenu" aria-haspopup="menu" aria-expanded aria-controls>; the <img> keeps its nav-chip classes/title/aria-label so the navbar chip tests still hold. aria-expanded is synced through a single hiveSyncGHUserMenuTrigger() on every open/close path (toggle, outside click, Escape, backup, sign-out).
• In both mobile media blocks that clip .oc-topbar-right, pin #oc-gh-user-menu with position: fixed under the navbar (safe-area aware, viewport-clamped width, max-height + overflow-y: auto so the long menu scrolls on a phone). Desktop is untouched (still the absolute dropdown).
• New TestNavAvatarMenuOpensOnMobile guards the button wrapper, the absence of data-action on the <img>, the position: fixed rule in each clipping media block, and the aria-expanded sync.
• No new inline style=, no raw px/colour values (style ratchet unaffected).

Verification

Playwright WebKit + Chromium at 390×844 with touch emulation against the served static/ dir: before — WebKit hidden=true after tap, Chromium opened but elementFromPoint on the first item did not hit the menu; after — both open with position: fixed, first item hit-testable, menu within the viewport. Desktop 1280×800: open/toggle-close/outside-click/Escape all behave as before, aria-expanded tracks state.

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign kellyaa for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[github-actions]

Open PR overlap check

Base branch: v5

Conflicts are checked with every PR merged onto the current tip of v5, so a PR that only needs a rebase is not reported as conflicting with its siblings.

PR	Title	Relation	Files
#12205	🐛 dashboard: GitHub API budget tile too narrow for caller table	same files	src/pkg/dashboard/static/index.html
#12158	✨ review: add review.shadow to record would_have_held for the review gate	same files	src/pkg/dashboard/static/index.html
#12170	🐛 Settings modal: sticky-section gap, height, and section navigation	same files	src/pkg/dashboard/static/index.html
#12182	✨ intent: add intent.shadow to record would_have_blocked	same files	src/pkg/dashboard/static/index.html
#12187	✨ dashboard settings: agent_sandbox scalar settings	same files	src/pkg/dashboard/static/index.html
#12186	✨ Hive-curated good first issues to attract contributors with their own coding agents	same files	src/pkg/dashboard/static/index.html

[hivecommons-hive]

merged by Hive trusted-author auto-merge: author @clubanderson holds role owner and GitHub permission admin on repo; CI green at d0c01f0.

[github-actions]

Thank you for your contribution! Your PR has been merged.

We'd love to hear how your experience was: share feedback