From fa1a473b91a541ee58c2eb111aba20b618f1bd6f Mon Sep 17 00:00:00 2001
From: Nubenetes Bot <bot@nubenetes.com>
Date: Sat, 20 Jun 2026 18:01:31 +0200
Subject: [PATCH] feat(v2/nav): OpenShift submenu (3/4/legacy) + group K8s
 distros; deterministic 2-col grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses the OpenShift 'lío' (ocp3 deprecated · openshift overview · ocp4
current 29-link page) and groups the Kubernetes distributions:

- OpenShift is now a nested submenu inside the Kubernetes menu (OpenShift ▸ →
  OpenShift 4 (current) · Overview · OpenShift 3 (legacy)), so the substantial
  ocp4 page is finally reachable. Reuses the AWS nested-submenu mechanism.
- Distros/platforms grouped at the end of the Kubernetes menu: Managed K8s ·
  OpenShift ▸ · Rancher · Distros & Alternatives (kubernetes-alternatives moved
  here and relabeled). Rancher was already present.
- Switched the 2-column Kubernetes menu from CSS multicol to a deterministic
  column-major grid (11 rows × 2 cols) with overflow:visible / max-height:none,
  eliminating the sub-pixel balancing remainder that left a faint scrollbar.

Verified in Chrome 148 (Playwright + screenshot): menu renders as a clean 2-col
card with NO scrollbar at viewport heights 768–1080; the OpenShift submenu opens
to the side, stays on-screen, and keeps the parent open. Cache-bust ?v=2.9.38.
V2-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/overrides/main.html | 11 +++++++++--
 docs/static/v2_elite.css | 23 ++++++++++++++++++-----
 v2-mkdocs.yml            |  2 +-
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index 6c6a16c1..e35f530a 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -49,7 +49,6 @@
         <a href="/kubernetes-storage/">💾 Storage</a>
         <a href="/kubernetes-autoscaling/">⚖️ Autoscaling</a>
         <a href="/kubernetes-operators-controllers/">🎛️ Operators</a>
-        <a href="/kubernetes-alternatives/">🔀 Alternatives</a>
         <a href="/kubernetes-bigdata/">📊 Big Data</a>
         <a href="/kubernetes-tutorials/">🎓 Tutorials</a>
         <a href="/kubernetes-backup-migrations/">🗄️ Backup &amp; Migrations</a>
@@ -57,8 +56,16 @@
         <a href="/kubernetes-based-devel/">💻 Local Dev</a>
         <a href="/kubernetes-on-premise/">🏢 On-Premise</a>
         <a href="/managed-kubernetes-in-public-cloud/">☁️ Managed K8s</a>
-        <a href="/openshift/">🎩 OpenShift</a>
+        <span class="nb-quicknav__subwrap">
+          <button class="nb-quicknav__subtrigger" popovertarget="nb-pop-ocp" type="button"><span>🎩 OpenShift</span><span class="nb-quicknav__caret" aria-hidden="true">▸</span></button>
+          <div class="nb-quicknav__menu nb-quicknav__submenu" id="nb-pop-ocp" popover>
+            <a href="/ocp4/">🎩 OpenShift 4 (current)</a>
+            <a href="/openshift/">🎩 Overview</a>
+            <a href="/ocp3/">🎩 OpenShift 3 (legacy)</a>
+          </div>
+        </span>
         <a href="/rancher/">🐮 Rancher</a>
+        <a href="/kubernetes-alternatives/">🔀 Distros &amp; Alternatives</a>
       </div>
     </span>
 
diff --git a/docs/static/v2_elite.css b/docs/static/v2_elite.css
index 2a424424..a0f57f0e 100644
--- a/docs/static/v2_elite.css
+++ b/docs/static/v2_elite.css
@@ -1338,9 +1338,11 @@ input[type="text"] {
 #nb-pop-dev      { position-anchor: --nb-a-dev; }
 [popovertarget="nb-pop-more"]     { anchor-name: --nb-a-more; }
 #nb-pop-more     { position-anchor: --nb-a-more; }
-/* nested AWS submenu anchors to its in-menu trigger */
+/* nested submenus anchor to their in-menu trigger */
 [popovertarget="nb-pop-aws"]      { anchor-name: --nb-a-aws; }
 #nb-pop-aws      { position-anchor: --nb-a-aws; }
+[popovertarget="nb-pop-ocp"]      { anchor-name: --nb-a-ocp; }
+#nb-pop-ocp      { position-anchor: --nb-a-ocp; }
 .nb-quicknav__menu {
   inset: auto; /* reset the UA-centered popover defaults */
   margin: 0;
@@ -1407,14 +1409,25 @@ input[type="text"] {
 /* 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. */
+/* Deterministic 2-column layout (column-major grid) so the menu height equals
+   the row count exactly — no balancing remainder, hence no stray scrollbar.
+   11 rows × 2 cols fits the 22 top-level Kubernetes entries. */
 .nb-quicknav__menu--cols {
-  display: block;
-  column-count: 2;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(11, auto);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: 0.4rem;
   min-width: 22rem;
+  /* a 2-column menu (~370px) always fits below the sticky bar, so never
+     scroll — avoids the sub-pixel grid/overflow scrollbar entirely */
+  max-height: none;
+  overflow: visible;
 }
-.nb-quicknav__menu--cols a {
-  break-inside: avoid;
+/* the submenu wrapper must be a real block (not display:contents) so its
+   trigger occupies one grid cell cleanly */
+.nb-quicknav__menu--cols .nb-quicknav__subwrap {
+  display: block;
 }
 
 /* ── Nested submenu (e.g. Cloud → AWS ▸ → AWS pages) ──
diff --git a/v2-mkdocs.yml b/v2-mkdocs.yml
index 98bce062..79893ca1 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.37
+  - static/v2_elite.css?v=2.9.38
 
 extra_javascript:
   - static/v2_filter.js?v=2.9.19