fix(ui): admin top nav scrolls horizontally instead of wrapping (LC-219) #262
Loading…
Reference in a new issue
No description provided.
Delete branch "feat/lc-219-admin-nav-scroll"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Reported on staging: "The top navbar is clunky for the admin settings. The navbar should be able to scroll so text doesn't have to wrap around."
admin_layout.html's<nav>hadflex gap-4but noflex-nowrap/overflow-x-auto/whitespace-nowrapmodifiers, so the 17 links wrapped INSIDE each anchor onto two or three lines on any viewport narrower than the total link width. Multi-word labels (Outgoing webhooks, Anti-spam, Link filter, Backup & restore) broke mid-anchor.Fix:
<nav>in<div class="relative border-b border-border">so the version chip can sit outside the scroll container.<nav>gainsflex-nowrap overflow-x-auto. Each<a>gainswhitespace-nowrap shrink-0. Bar stays one row at every viewport; horizontal scrollbar / touch / Shift+wheel scroll when content overflows.absolute right-2 top-1/2 -translate-y-1/2withbg-surfacemask +pointer-events-none. Visible at all scroll positions; click-through to links beneath.hidden md:inline-blockhides the chip on phone widths where horizontal space is most constrained.<nav aria-label="{{ "admin-nav-label"|t }}">(new Fluent key in en + es) +aria-current="page"on the active link.Test plan
cargo check -p lets-chat-serverclean.just build-cssclean./admin/*pages at narrow viewport (Spanish locale + 768 px width is the canonical overflow trigger). Bar stays one row, scrollbar reveals, version chip stays right-pinned.<nav>is announced as "Admin navigation"; active link announced with current-page state.User on staging: "The top navbar is clunky for the admin settings. The navbar should be able to scroll so text doesn't have to wrap around." The admin layout's `<nav>` had no `flex-nowrap` / `overflow-x-auto` modifier and no `whitespace-nowrap` on the 17 links. On any viewport narrower than the sum of the link widths (most desktop windows in Spanish, every laptop screen at <1500 px, every phone), the labels wrapped INSIDE each anchor onto two or three lines (e.g. "Outgoing webhooks" -> "Outgoing" newline "webhooks"). The bar became a multi-line wall of broken phrases. Wrap the existing `<nav>` in a `<div class="relative border-b border-border">` so the version chip can sit absolute-positioned outside the scroll container. Switch the `<nav>` to `flex-nowrap overflow-x-auto`; switch each `<a>` to `whitespace-nowrap shrink-0`. The bar now stays one row at every viewport width and reveals a horizontal scrollbar / accepts touch + Shift-wheel scrolling when total link width overflows. Multi-word labels never break inside the anchor. Move the version chip OUT of the scroll container. Absolute-pin it to the right edge with `bg-surface` masking underlying link text that would otherwise show through when the strip is scrolled all the way right. `pointer-events-none` lets a clicked link "pass through" the chip if a hit area happens to sit beneath it. `hidden md:inline-block` hides the chip on phone widths where horizontal space is most constrained; the version is still reachable via `/settings` About panel. Accessibility improvements while editing this surface: - `<nav aria-label="{{ "admin-nav-label"|t }}">` names the landmark (new Fluent key `admin-nav-label` in en + es). - `aria-current="page"` on the active link gives SR + browser-feature parity with the existing `font-semibold` visual affordance. Generated by the same `{% if section == "..." %}` predicate so no second source of truth. Verified: `cargo check -p lets-chat-server` clean (Fluent keys resolve), `just build-css` clean. #LC-219