mirror of
https://github.com/nubenetes/awesome-kubernetes.git
synced 2026-07-12 09:51:00 +00:00
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:
26
docs/static/v2_elite.css
vendored
26
docs/static/v2_elite.css
vendored
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user