From d9860a77decf751a279983118c9fd22f04f0912a Mon Sep 17 00:00:00 2001 From: Nubenetes Bot Date: Sat, 20 Jun 2026 17:39:20 +0200 Subject: [PATCH] fix(v2/nav): make tall Kubernetes menu reliable (2 columns, no scroll, no flip-block) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Kubernetes dropdown was the only menu tall enough (22 items) to need a scrollbar (overflow-y on an anchor-positioned popover), which made it open/behave unreliably compared to the others. Two fixes: - The Kubernetes menu now uses a 2-column layout (column-count:2), halving its height (~731px → ~353px) so it shows in full WITHOUT a scrollbar at any realistic viewport. Multicol is column-major, so reading order is preserved. - Removed flip-block from the menu position-try fallbacks (kept flip-inline): the quick-nav is a sticky top bar, so a tall menu flipped above would shoot off the top of the screen. Menus now always open downward. Verified in Chrome 148 (Playwright): Kubernetes menu opens with no scrollbar and stays fully on-screen at viewport heights 700–1080; all 11 menus + the nested AWS submenu still open correctly; bar stays one row to 1280px. Cache-bust ?v=2.9.37. V2-only. Co-Authored-By: Claude Opus 4.8 --- docs/overrides/main.html | 2 +- docs/static/v2_elite.css | 17 ++++++++++++++++- v2-mkdocs.yml | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/overrides/main.html b/docs/overrides/main.html index fe2ecb9f..6c6a16c1 100644 --- a/docs/overrides/main.html +++ b/docs/overrides/main.html @@ -36,7 +36,7 @@ -
+
☸️ Overview 🐳 Docker 🧰 Tools diff --git a/docs/static/v2_elite.css b/docs/static/v2_elite.css index 25cb5d35..2a424424 100644 --- a/docs/static/v2_elite.css +++ b/docs/static/v2_elite.css @@ -1351,7 +1351,9 @@ input[type="text"] { 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 */ + /* Only flip horizontally near the right edge. NEVER flip-block: the quick-nav + is a sticky top bar, so a tall menu flipped above would shoot off-screen. */ + position-try-fallbacks: flip-inline; margin-block-start: 0.45rem; min-width: 9.5rem; padding: 0.35rem; @@ -1402,6 +1404,19 @@ input[type="text"] { border-block-start: 1px solid rgba(255, 255, 255, 0.1); } +/* Two-column layout for long menus (e.g. Kubernetes, 22 items) so they stay + short enough to show in full WITHOUT a scrollbar — the scrollable tall popover + was unreliable. Multicol is column-major, so reading order is preserved. */ +.nb-quicknav__menu--cols { + display: block; + column-count: 2; + column-gap: 0.4rem; + min-width: 22rem; +} +.nb-quicknav__menu--cols a { + break-inside: avoid; +} + /* ── Nested submenu (e.g. Cloud → AWS ▸ → AWS pages) ── A second-level popover invoked from inside a menu. The trigger looks like a menu item; the submenu opens to the side (inline-end) of the trigger, with a diff --git a/v2-mkdocs.yml b/v2-mkdocs.yml index 907d572c..98bce062 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.36 + - static/v2_elite.css?v=2.9.37 extra_javascript: - static/v2_filter.js?v=2.9.19