From dedf7e3f74fd395dceb2b7394bb3d306c6298c5d Mon Sep 17 00:00:00 2001
From: rootiest <chris@rootiest.com>
Date: Mon, 8 Jun 2026 11:52:56 -0400
Subject: [PATCH] fix(docs): fix nav alignment by grouping label+link pairs as
 flex units

---
 docs/html-style.html | 51 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/docs/html-style.html b/docs/html-style.html
index 80138e5..2cecdbc 100644
--- a/docs/html-style.html
+++ b/docs/html-style.html
@@ -188,8 +188,6 @@ li { margin: 0.35em 0; }
 
 /* ── Chunk navigation bar (prev / up / next) ───────────────── */
 nav:not(#TOC):not([role="doc-toc"]) {
-  display: flex;
-  align-items: stretch;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
@@ -201,16 +199,19 @@ nav:not(#TOC):not([role="doc-toc"]) p {
   margin: 0;
   padding: 0.65em 1.2em;
   display: flex;
-  gap: 1.75em;
+  gap: 0.4em 1.75em;
   flex-wrap: wrap;
   align-items: center;
-  width: 100%;
 }
-nav:not(#TOC):not([role="doc-toc"]) a {
-  color: var(--blue);
+/* JS wraps each "Label: <a>" pair in .nav-item so they flex as a unit */
+.nav-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
   white-space: nowrap;
 }
-nav:not(#TOC):not([role="doc-toc"]) a:hover { color: var(--lavender); }
+.nav-item a       { color: var(--blue); }
+.nav-item a:hover { color: var(--lavender); }
 
 /* ── Table of contents panel ───────────────────────────────── */
 nav#TOC, nav[role="doc-toc"] {
@@ -257,14 +258,44 @@ nav#TOC a:hover, nav[role="doc-toc"] a:hover {
 }
 </style>
 <script>
-/* Hide the ToC on every page except index.html */
 document.addEventListener('DOMContentLoaded', function () {
-  var p = location.pathname;
-  var onIndex = p === '/' || p === '' || /\/index\.html(\?.*)?$/.test(p);
+  /* ── Hide ToC on every page except index.html ───────────── */
+  var path = location.pathname;
+  var onIndex = path === '/' || path === '' || /\/index\.html(\?.*)?$/.test(path);
   if (!onIndex) {
     var toc = document.getElementById('TOC') ||
               document.querySelector('[role="doc-toc"]');
     if (toc) toc.remove();
   }
+
+  /* ── Wrap each "Label: <a>" pair in a .nav-item span ───────
+     Pandoc emits label text nodes and anchors as siblings;
+     flex sees them as separate items, causing labels to split
+     from their links when wrapping. Grouping them in a span
+     keeps each label+link as a single flex unit.           */
+  document.querySelectorAll('nav:not(#TOC):not([role="doc-toc"])').forEach(function (nav) {
+    var p = nav.querySelector('p');
+    if (!p) return;
+    var children = Array.from(p.childNodes);
+    var pairs = [];
+    for (var i = 0; i + 1 < children.length; i++) {
+      var cur = children[i];
+      var nxt = children[i + 1];
+      if (cur.nodeType === Node.TEXT_NODE &&
+          /[A-Z][a-z]*:\s*/.test(cur.textContent) &&
+          nxt.nodeType === Node.ELEMENT_NODE &&
+          nxt.tagName === 'A') {
+        pairs.push([cur, nxt]);
+        i++; // skip the anchor on the next iteration
+      }
+    }
+    pairs.forEach(function (pair) {
+      var span = document.createElement('span');
+      span.className = 'nav-item';
+      p.insertBefore(span, pair[0]);
+      span.appendChild(pair[0]);
+      span.appendChild(pair[1]);
+    });
+  });
 });
 </script>