fix(v2/nav): quick-nav menus now open below their button + fit one row

Two fixes to the hybrid quick-nav shipped in v2.9.31:

1. Popover menus did not visibly open on click. Root cause: the menus used
   `position-area: bottom span-inline-end`, which mixes a physical keyword
   (bottom) with a logical one (span-inline-end) — invalid, so it computed to
   `none` and the menu fell back to its static position on top of the button.
   Additionally the popover's implicit anchor was not resolving. Fixed by using
   a valid all-physical `position-area: bottom span-right` and declaring explicit
   anchor-name / position-anchor pairs per button↔menu, so each menu reliably
   drops below its trigger and auto-flips (span-left) near the right edge.
   Verified in Chrome 148 via Playwright: all five menus open on real click,
   render below the button, stay within the viewport, and close on Escape.

2. The bar wrapped to a second row at common widths. Reduced the chip font
   ~1pt (0.7rem → 0.64rem) and trimmed the column-gap/padding so all 7 pills +
   5 menus fit a single row down to 1280px viewports.

Bumps v2_elite.css cache-bust to ?v=2.9.32. V2-only, template/CSS only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Nubenetes Bot
2026-06-20 16:13:13 +02:00
parent 8c44e3f665
commit c737d4b52f
2 changed files with 22 additions and 6 deletions

View File

@@ -1246,9 +1246,9 @@ input[type="text"] {
flex-wrap: wrap;
align-items: center;
justify-content: center; /* centered rows read as a balanced command bar */
gap: 0.4rem 0.5rem;
gap: 0.4rem 0.38rem;
padding-block: 0.5rem;
padding-inline: 1.2rem;
padding-inline: 1rem;
}
.nb-quicknav__link {
/* chip colors derived from the theme accent via color-mix (Chrome 111+) */
@@ -1259,11 +1259,11 @@ input[type="text"] {
gap: 0.3em;
color: rgba(255, 255, 255, 0.82) !important;
text-decoration: none;
font-size: 0.7rem;
font-size: 0.64rem; /* ~1pt smaller so all pills + menus fit one row */
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
padding: 0.22rem 0.62rem;
padding: 0.22rem 0.55rem;
border-radius: 999px;
background: var(--nb-chip-bg);
border: 1px solid var(--nb-chip-bd);
@@ -1313,10 +1313,26 @@ input[type="text"] {
.nb-quicknav__group:has(.nb-quicknav__menu:popover-open) .nb-quicknav__caret {
transform: rotate(180deg);
}
/* Explicit anchor pairing per button↔menu — do NOT rely on the popover's
implicit anchor (it isn't established reliably, leaving the menu in its
static position over the button). */
[popovertarget="nb-pop-cloud"] { anchor-name: --nb-a-cloud; }
#nb-pop-cloud { position-anchor: --nb-a-cloud; }
[popovertarget="nb-pop-net"] { anchor-name: --nb-a-net; }
#nb-pop-net { position-anchor: --nb-a-net; }
[popovertarget="nb-pop-sec"] { anchor-name: --nb-a-sec; }
#nb-pop-sec { position-anchor: --nb-a-sec; }
[popovertarget="nb-pop-ops"] { anchor-name: --nb-a-ops; }
#nb-pop-ops { position-anchor: --nb-a-ops; }
[popovertarget="nb-pop-more"] { anchor-name: --nb-a-more; }
#nb-pop-more { position-anchor: --nb-a-more; }
.nb-quicknav__menu {
inset: auto; /* reset the UA-centered popover defaults */
margin: 0;
position-area: bottom span-inline-end; /* drop below the invoking button */
/* drop below the invoking button, left-aligned. NB: position-area values must
be all-physical or all-logical — mixing (e.g. `bottom span-inline-end`) is
invalid and silently computes to `none`, leaving the menu over the button. */
position-area: bottom span-right;
position-try-fallbacks: flip-block, flip-inline; /* auto-flip near edges */
margin-block-start: 0.45rem;
min-width: 9.5rem;

View File

@@ -114,7 +114,7 @@ extra:
extra_css:
- https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap
- static/extra.css
- static/v2_elite.css?v=2.9.31
- static/v2_elite.css?v=2.9.32
extra_javascript:
- static/v2_filter.js?v=2.9.19