From c4bfa6a41bcdd55427568a42462095daaa858cf2 Mon Sep 17 00:00:00 2001
From: Stanislav Zhuk <stasadev@gmail.com>
Date: Thu, 30 Jul 2026 11:44:15 +0300
Subject: [PATCH] layout: measure the header nav rather than collapsing it at a
 breakpoint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## The Issue

Follow-up to the review on #704. The header nav and the blog post title both
switched to their narrow layouts at `lg` (1024px). Browser zoom shrinks the
viewport in CSS pixels, so at 110-125% a 1200px window falls under that and
the nav collapsed wholesale under the menu button.

`w-2/3` on the nav's right-hand wrapper capped its contents at two thirds of
the container, which is why the threshold had to be that high.

The menu behind that button was a `div` only the script could reveal, so with
JavaScript off there was no way to reach the nav links below 1024px at all.

The byline's edit link was anchored to the full 72rem `site-container` instead
of the text, landing about 26rem past the end of it on posts with no feature
image.

## How This PR Solves The Issue

- Nav links come from one array rendered into both the bar and the menu. A
  script measures them and drops links from the end until the rest fit, moving
  each one into the menu. The button shows only when something is hidden.
  Without the script the markup still falls back to `hidden lg:flex`.
- The menu is a `details`/`summary`, so it opens with JavaScript off and the
  script keeps no open/close code of its own. The separate close button is
  gone; the summary toggles.
- Nothing in the bar may shrink, or the measurements come back compressed and
  report room that isn't there. The menu's width stays reserved while it's
  hidden, so the result can't oscillate.
- `.title-grid` puts the blog title beside its feature image from 52rem, with
  the image column at `clamp(16rem, 36%, 25rem)` so it shrinks instead of
  stacking.
- The byline row is capped at `--reading-measure`.

## Manual Testing Instructions

Preview: https://pr-REPLACE_ME_WITH_PR_NUMBER.ddev-com-fork-previews.pages.dev/

1. Drag the window from 1400px to 320px: links should leave the bar one at a
   time and appear in the menu, with the logo never compressed.
2. At 1200px, zoom to 110%, 125% and 150%: as many links as fit at each.
3. Compare `/blog/release-v1-25-3/` against a post with no feature image, at
   1400px, 900px and 700px.
4. With JavaScript off: all links above 1024px, and below it the button opens
   the menu.

## Release/Deployment Notes

None.

🤖 Developed with assistance from [Claude Code](https://claude.ai/code)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/Header.astro  | 264 +++++++++++++++++------------------
 src/components/Heading.astro |  11 +-
 src/styles/global.css        |  51 ++++++-
 3 files changed, 177 insertions(+), 149 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 9d1c0e72..a9677875 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,54 +3,100 @@
  * Global site header.
  */
 import { GITHUB_URL, DOCUMENTATION_URL } from "../const"
-import {
-  MagnifyingGlassIcon,
-  Bars2Icon,
-  XMarkIcon,
-} from "@heroicons/react/24/solid/index.js"
+import { MagnifyingGlassIcon, Bars2Icon } from "@heroicons/react/24/solid/index.js"
 import SponsorsBanner from "./SponsorsBanner.astro"
 import ThemeToggle from "./ThemeToggle.astro"
+
+// Links leave the bar from the end as it runs out of room, so this is also
+// least-important-last.
+const navItems = [
+  { label: "Get Started", href: "/get-started" },
+  { label: "Download", href: "/download" },
+  { label: "Docs", href: DOCUMENTATION_URL, external: true },
+  { label: "Blog", href: "/blog" },
+  { label: "GitHub", href: GITHUB_URL, external: true },
+  { label: "❤️ Sponsor DDEV", href: "/sponsor" },
+]
 ---
 
 <script>
-  const menuToggle = document.getElementById("mobile-trigger")
-  const menuClose = document.getElementById("mobile-close")
-  const menuContainer = document.getElementById("mobile-menu")
-  let expanded = false
+  const nav = document.getElementById("main-nav")
+  const list = document.getElementById("nav-links")
+  const logo = document.getElementById("nav-logo")
+  const icons = document.getElementById("nav-icons")
+  const menu = document.getElementById("nav-menu") as HTMLDetailsElement | null
 
-  const initListeners = () => {
-    menuToggle.addEventListener("click", () => {
-      toggleMenu()
-    })
+  const HIDDEN = "data-nav-hidden"
 
-    menuClose.addEventListener("click", () => {
-      toggleMenu(true)
-    })
+  // Links leave the bar one at a time as it fills up, instead of all at once at
+  // a breakpoint that can only guess whether they fit. Opening and closing the
+  // menu is the browser's job, so there's none of it here.
+  if (nav && list && logo && icons && menu) {
+    const items = Array.from(list.querySelectorAll<HTMLElement>("[data-nav-item]"))
+    const menuItems = Array.from(menu.querySelectorAll<HTMLElement>("[data-nav-item]"))
 
-    window.addEventListener(
-      "resize",
-      (event) => {
-        let width = document.body.clientWidth
-        if (width > 1024) {
-          toggleMenu(true)
-        }
-      },
-      true
-    )
-  }
+    let itemWidths: number[] = []
+    let gap = 0
 
-  const toggleMenu = (forceClosed?: boolean) => {
-    if (expanded || forceClosed) {
-      menuContainer.classList.remove("open")
-      expanded = false
-    } else {
-      menuContainer.classList.add("open")
-      expanded = true
+    // Nothing here yields, so no paint happens while `elements` are shown.
+    const unhidden = <T,>(elements: HTMLElement[], read: () => T): T => {
+      const hidden = elements.filter((element) => element.hasAttribute(HIDDEN))
+      hidden.forEach((element) => element.removeAttribute(HIDDEN))
+      const value = read()
+      hidden.forEach((element) => element.setAttribute(HIDDEN, ""))
+      return value
     }
-  }
 
-  if (menuToggle && menuClose && menuContainer) {
-    initListeners()
+    // Link widths don't change with the viewport, so they're measured once.
+    const measure = () => {
+      gap = parseFloat(getComputedStyle(list).columnGap) || 0
+      itemWidths = unhidden(items, () =>
+        items.map((item) => item.getBoundingClientRect().width)
+      )
+    }
+
+    const widthOf = (visible: Set<number>) => {
+      if (!visible.size) return 0
+      let width = gap * (visible.size - 1)
+      visible.forEach((index) => {
+        width += itemWidths[index]
+      })
+      return width
+    }
+
+    const fit = () => {
+      const style = getComputedStyle(nav)
+      const inner =
+        nav.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)
+      // The menu counts as showing even when it isn't, so hiding it can only
+      // free space and this can't oscillate.
+      const reserved =
+        logo.getBoundingClientRect().width +
+        unhidden([menu], () => icons.getBoundingClientRect().width) +
+        gap
+      const available = inner - reserved
+
+      const visible = new Set(items.map((_, index) => index))
+      for (let index = items.length - 1; index >= 0; index--) {
+        if (widthOf(visible) <= available) break
+        visible.delete(index)
+      }
+
+      items.forEach((item, index) => {
+        item.toggleAttribute(HIDDEN, !visible.has(index))
+        menuItems[index].toggleAttribute(HIDDEN, visible.has(index))
+      })
+
+      const complete = visible.size === items.length
+      menu.toggleAttribute(HIDDEN, complete)
+      if (complete) menu.open = false
+    }
+
+    // Takes over from the `lg` fallback in the markup (see global.css).
+    nav.classList.add("nav-measured")
+    measure()
+    fit()
+    new ResizeObserver(fit).observe(nav)
   }
 </script>
 
@@ -60,10 +106,11 @@ import ThemeToggle from "./ThemeToggle.astro"
   <!-- Gutters match the rest of the site's containers, so the logo lines up
        with the page content at every width. -->
   <nav
+    id="main-nav"
     class="flex justify-between items-center content-center site-container site-gutter"
     aria-label="Main"
   >
-    <a href="/" class="relative block cursor-pointer -ml-2">
+    <a href="/" id="nav-logo" class="relative block shrink-0 cursor-pointer -ml-2">
       <span class="sr-only">DDEV logo</span>
       <img
         class="h-8 w-auto sm:h-10 dark:hidden"
@@ -82,113 +129,54 @@ import ThemeToggle from "./ThemeToggle.astro"
         height="69"
       />
     </a>
-    <div class="w-2/3 flex justify-end items-center gap-6">
-      <ul class="hidden lg:flex items-center gap-6">
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href="/get-started"
-            rel="prefetch">Get Started</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href="/download"
-            rel="prefetch">Download</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href={DOCUMENTATION_URL}
-            target="_blank">Docs</a
-          >
-        </li>
-        <li>
-          <a class="font-bold whitespace-nowrap dark:text-white" href="/blog" rel="prefetch"
-            >Blog</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href={GITHUB_URL}
-            target="_blank">GitHub</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href="/sponsor"
-            rel="prefetch">❤️ Sponsor DDEV</a
-          >
-        </li>
+    <div class="flex shrink-0 justify-end items-center gap-6">
+      <ul id="nav-links" class="nav-links hidden lg:flex shrink-0 items-center gap-6">
+        {
+          navItems.map((item, index) => (
+            <li class="shrink-0" data-nav-item={index}>
+              <a
+                class="font-bold whitespace-nowrap dark:text-white"
+                href={item.href}
+                target={item.external ? "_blank" : undefined}
+                rel={item.external ? undefined : "prefetch"}
+              >
+                {item.label}
+              </a>
+            </li>
+          ))
+        }
       </ul>
-      <div class="flex items-center gap-3">
+      <div id="nav-icons" class="flex shrink-0 items-center gap-3">
         <a href="/search" class="p-1 dark:text-white">
           <span class="sr-only">Search</span>
           <MagnifyingGlassIcon className="w-6 h-6 " aria-hidden={true} />
         </a>
         <ThemeToggle />
-        <button id="mobile-trigger" class="flex lg:hidden p-1">
-          <span class="sr-only">Menu</span>
-          <Bars2Icon className="w-6 h-6 dark:text-white" />
-        </button>
+        <!-- `details` rather than a button and a script, so the links are still
+             reachable with JavaScript turned off. -->
+        <details id="nav-menu" class="nav-menu lg:hidden">
+          <summary class="nav-summary">
+            <span class="sr-only">Menu</span>
+            <Bars2Icon className="w-6 h-6 dark:text-white" />
+          </summary>
+          <ul class="menu">
+            {
+              navItems.map((item, index) => (
+                <li data-nav-item={index}>
+                  <a
+                    class="font-bold block py-3 px-4 text-lg border-t border-dotted"
+                    href={item.href}
+                    target={item.external ? "_blank" : undefined}
+                    rel={item.external ? undefined : "prefetch"}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </details>
       </div>
     </div>
-    <div id="mobile-menu" class="menu">
-      <div class="flex w-full justify-end mb-2">
-        <button id="mobile-close" class="flex p-2 py-3 -mr-4">
-          <span class="sr-only">Close</span>
-          <XMarkIcon className="w-6 h-6 " />
-        </button>
-      </div>
-
-      <ul>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/get-started"
-            rel="prefetch">Get Started</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/download"
-            rel="prefetch">Download</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href={DOCUMENTATION_URL}
-            target="_blank">Docs</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/blog"
-            rel="prefetch">Blog</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href={GITHUB_URL}
-            target="_blank">GitHub</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/sponsor"
-            rel="prefetch">❤️ Sponsor DDEV</a
-          >
-        </li>
-      </ul>
-    </div>
   </nav>
 </header>
diff --git a/src/components/Heading.astro b/src/components/Heading.astro
index 6c8ad0d0..f26bb1a3 100644
--- a/src/components/Heading.astro
+++ b/src/components/Heading.astro
@@ -34,12 +34,7 @@ const hasByline = Boolean(author || date || readTime || editUrl)
 ---
 
 <div
-  class:list={[
-    "my-24 site-gutter",
-    // Wider than the sidebar below it, and top-aligned so the title starts
-    // where it does on every other page.
-    hasAside && "lg:grid lg:grid-cols-[1fr_25rem] lg:gap-12 lg:items-start",
-  ]}
+  class:list={["my-24 site-gutter", hasAside && "title-grid"]}
 >
   <div>
     <h1 class="font-bold text-4xl dark:text-white">{title}</h1>
@@ -51,7 +46,7 @@ const hasByline = Boolean(author || date || readTime || editUrl)
         carried its margins, pushing those pages' content down. */}
     {
       hasByline && (
-        <div class="md:flex md:flex-wrap md:items-center md:content-center gap-y-2 my-6 font-mono">
+        <div class="md:flex md:flex-wrap md:items-center md:content-center gap-y-2 my-6 max-w-[var(--reading-measure)] font-mono">
           {
         author && (
               <div class="flex items-center content-center mr-2">
@@ -125,7 +120,7 @@ const hasByline = Boolean(author || date || readTime || editUrl)
 
   {
     hasAside && (
-      <div class="mt-8 lg:mt-0">
+      <div class="title-aside">
         <Fragment set:html={aside} />
       </div>
     )
diff --git a/src/styles/global.css b/src/styles/global.css
index 79288f28..e65084eb 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -45,6 +45,28 @@
   @apply mt-16 lg:col-start-3 lg:mt-0 lg:pl-12;
 }
 
+/* A page title with something beside it, such as a blog post's feature image
+ * (see Heading.astro). The image column is fluid, so the two can sit side by
+ * side well before the title has to give up its own width. */
+.title-grid {
+  @apply grid items-start gap-8;
+}
+
+.title-aside {
+  @apply mt-8;
+}
+
+@media (min-width: 52rem) {
+  .title-grid {
+    grid-template-columns: 1fr clamp(16rem, 36%, 25rem);
+    gap: 3rem;
+  }
+
+  .title-aside {
+    margin-top: 0;
+  }
+}
+
 /* A block of links or a small call to action in a page's sidebar column. */
 .sidebar-card {
   @apply rounded-lg border border-gray-200 bg-gray-50 p-5 dark:border-slate-600 dark:bg-slate-800;
@@ -136,14 +158,37 @@ mark {
   @apply dark:bg-[blue];
 }
 
+/* The panel `details` opens, positioned against the page rather than the
+ * summary, so it hangs from the top right corner as it always has. */
 .menu {
-  @apply hidden absolute top-0 right-0 max-w-full bg-white px-8 py-4 z-30 text-center shadow-2xl rounded-lg m-3 dark:bg-slate-800 dark:text-white;
+  @apply absolute top-0 right-0 max-w-full bg-white px-8 py-4 z-30 text-center shadow-2xl rounded-lg m-3 dark:bg-slate-800 dark:text-white;
+}
 
-  &.open {
-    @apply block;
+/* The summary is the menu button, so it loses the disclosure triangle. */
+.nav-summary {
+  @apply flex cursor-pointer p-1;
+  list-style: none;
+
+  &::-webkit-details-marker {
+    display: none;
   }
 }
 
+/* Set once Header.astro's script can measure what fits, replacing the
+ * `hidden lg:flex` fallback in the markup. Two classes beat one, no
+ * `!important` needed. */
+.nav-measured .nav-links {
+  display: flex;
+}
+
+.nav-measured .nav-menu {
+  display: block;
+}
+
+.nav-measured [data-nav-hidden] {
+  display: none;
+}
+
 input[type="radio"]:checked + label {
   @apply font-bold border-blue-300 shadow border;
 }