Responsive admin sidebar + navbar dropdown fix

Responsive admin sidebar + navbar dropdown fix

#30 in Riparion/riparion-cms — merged 2026-06-01

Summary

Two related UI changes to the catalog-component chrome:

  1. Fix account dropdown clipping at the viewport right edge.
  2. Rework the admin shell as a responsive catalog sidebar, installing the supporting catalog components.

1. Navbar dropdown clipping

.dx-navbar-content was positioned position: absolute; left: 0, so the panel always grew rightward from the trigger's left edge. The account menu sits at the far right of the bar, so its panel overflowed the viewport and got clipped.

Fix: anchor the trailing nav's dropdown (.dx-navbar-nav:last-child .dx-navbar-content) to the trigger's right edge so it grows leftward. The search form is the first child and the account NavbarNav is the last, so :last-child cleanly targets only this menu and :first-child never matches the nav.

2. Responsive admin sidebar

  • Install the separator, sheet, sidebar, skeleton, and tooltip catalog components (modules + #[css_module] stylesheets wired into LocalStylesheets).
  • Rebuild AdminShell on the catalog Sidebar in Offcanvas mode: collapsible on desktop (via SidebarTrigger / ⌘-B) and an automatic slide-in overlay drawer on narrow screens.
  • Nav entries become a reusable AdminNavItem component — each a SidebarMenuButton rendered as a router Link, permission-gated by the exact token its section requires and highlighted when active.

Commits

  • 542f47d Fix account dropdown clipping at viewport right edge
  • 46f4cfa Add catalog sidebar/sheet/tooltip components; rework admin shell as responsive sidebar

🤖 Generated with Claude Code

Last updated 2026-06-02