OXY-151: responsive TopBar overflow "More" menu

[Kalin-Rudnicki]

OXY-151 — Responsive TopBar overflow "More" menu

Mobile/responsive counterpart to the OXY-152 TopBar dropdown work. Collapses TopBar nav items into a single overflow "More" dropdown on narrow viewports, reusing the OXY-152 DropdownMenu component rather than duplicating it — which is exactly the handoff OXY-152 was designed for.

Stacked on #299 (branch OXY-152). This PR is based on OXY-152, so the diff shows only the new OXY-151 work. Merge #299 first (or review this against that base). Depends on / stacks on #299.

What's included

• TopBar.nav(items: DropdownMenu.Item*) (+ .moreLabel(...), .moreId(...)): nav items declared once as typed DropdownMenu.Items (label / icon / onClickPush / onSelect / disabled / separator).
• Auto-swap is pure CSS @media (TopBar.responsiveSheet, registered in coreOxygenStyleSheets) — no JS / matchMedia, so it's SSR/hydration safe (no FOUC):
  • .oxy-topbar-nav — inline items, hidden below md.
  • .oxy-topbar-overflow — collapsed "More" DropdownMenu, hidden at/above md.
• Inline items reuse the same typed item via private[component] accessors on DropdownMenu.Item, so inline + collapsed layouts never diverge.
• Showcase: new ResponsiveTopBarPage (live bar + forced-narrow 360px frame), wired into ShowcaseLayout sideNav + UIMain routes.
• Docs: builders.md "Responsive TopBar (overflow menu)" subsection + updated mobile-shell WIP note.
• Test: OxygenColorSystemSpec asserts responsiveSheet emits the correct md swap rules.

Scope

OXY-151 is a broad umbrella (hamburger→Drawer side nav, MatchMedia.isMobile, CenteredCard mobile TODO). This PR delivers the TopBar overflow "More" menu slice — the specific piece OXY-152 hands off. The remaining sub-scopes are left as documented follow-up.

Verification

• oxygen-ui-web/compile ✓ · example-ui-web/compile ✓ · oxygen-ui-web/test ✓ (46 passed, incl. new)
• sbt fmt clean.

🤖 Generated with Claude Code

https://claude.ai/code/session_011YxWKdsz97QT9BD7AdpSq6

[Kalin-Rudnicki]

🤖 Automated multi-agent review (confirmed findings)

Medium

Reusing demoBar twice mounts two DropdownMenus with identical ids, sharing open state
example/apps/ui/src/main/scala/oxygen/example/ui/page/showcase/pages/ResponsiveTopBarPage.scala:50
demoBar is rendered twice on the page (live-bar div ~line 66 and inside narrowFrame ~line 50), so every DropdownMenu id inside it is duplicated (moreId default topbar-overflow and right-slot user dropdown responsive-user). Since DropdownMenu keys its open/closed state by id in a global map, clicking "More" (or the "Jane" user menu) on the live bar opens BOTH panels at once, and arrow-key roving focus then matches menuitems across both panels — breaking navigation. Give each responsive bar distinct .moreId(...) and user-dropdown ids.

---

These are AI-generated, adversarially-verified findings and may still contain false positives.