From c737d4b52f767ae154ee0f617a2e0fdc6a15eaac Mon Sep 17 00:00:00 2001
From: Nubenetes Bot <bot@nubenetes.com>
Date: Sat, 20 Jun 2026 16:13:13 +0200
Subject: [PATCH] fix(v2/nav): quick-nav menus now open below their button +
 fit one row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 docs/static/v2_elite.css | 26 +++++++++++++++++++++-----
 v2-mkdocs.yml            |  2 +-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/docs/static/v2_elite.css b/docs/static/v2_elite.css
index 1f774087..c4cf0eed 100644
--- a/docs/static/v2_elite.css
+++ b/docs/static/v2_elite.css
@@ -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;
diff --git a/v2-mkdocs.yml b/v2-mkdocs.yml
index 39fb9ede..e8db2559 100644
--- a/v2-mkdocs.yml
+++ b/v2-mkdocs.yml
@@ -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