From ccc81defac2e0346b91bdf8beda6da1cfa461dcd Mon Sep 17 00:00:00 2001
From: Julian Hofer <julianhofer@gnome.org>
Date: Tue, 18 Aug 2026 08:34:56 +0000
Subject: [PATCH] Move the section tabs into the header bar on wide screens

The section tabs (Home, Docs, Packages, Community) sat on their own row below the logo at every width, even though the header bar has plenty of room on wide screens. Now it moves to its own row only for small screens.

### How Has This Been Tested?

Screenshots of the homepage and a docs page at widths on both sides of the breakpoint, plus the mobile layout. `prettier` and `astro check` pass.
---
 src/components/Header.astro | 96 ++++++++++++++++++++++++-------------
 src/styles/custom.css       | 16 +++++--
 2 files changed, 74 insertions(+), 38 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 98b15a15..5d168a82 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -10,12 +10,14 @@ import ThemeSelect from "virtual:starlight/components/ThemeSelect";
 import { NAV_TABS as tabs } from "../data/nav";
 
 /**
- * Override of Starlight's Header: the original row plus a tab row underneath
- * (the zensical.org pattern), so the main sections stay reachable from every
- * page - the splash homepage has no sidebar. The row's extra height comes
- * from `--sl-nav-height`, raised in custom.css; the first row keeps the
- * original height via `--rs-nav-row`. The tabs live in src/data/nav.ts,
- * shared with the Sidebar override.
+ * Override of Starlight's Header with a section-tab nav (the zensical.org
+ * pattern), so the main sections stay reachable from every page - the splash
+ * homepage has no sidebar. Below 60rem the tabs sit on their own row under
+ * the logo; from that breakpoint up they move next to the logo in the
+ * single header row. The row heights come from `--sl-nav-height`, set
+ * per breakpoint in custom.css; the logo row keeps the original height via
+ * `--rs-nav-row`. The tabs live in src/data/nav.ts, shared with the Sidebar
+ * override.
  */
 
 const shouldRenderSearch =
@@ -25,21 +27,9 @@ const shouldRenderSearch =
 const pathname = Astro.url.pathname;
 ---
 
-<div class="stacked">
-  <div class="header">
-    <div class="title-wrapper sl-flex">
-      <SiteTitle />
-    </div>
-    <div class="search-wrapper sl-flex print:hidden">
-      {shouldRenderSearch && <Search />}
-    </div>
-    <div class="sl-hidden md:sl-flex print:hidden right-group">
-      <div class="sl-flex social-icons">
-        <SocialIcons />
-      </div>
-      <ThemeSelect />
-      <LanguageSelect />
-    </div>
+<div class="header">
+  <div class="title-wrapper sl-flex">
+    <SiteTitle />
   </div>
   <nav class="top-nav print:hidden" aria-label="Main">
     {
@@ -53,6 +43,16 @@ const pathname = Astro.url.pathname;
       ))
     }
   </nav>
+  <div class="search-wrapper sl-flex print:hidden">
+    {shouldRenderSearch && <Search />}
+  </div>
+  <div class="sl-hidden md:sl-flex print:hidden right-group">
+    <div class="sl-flex social-icons">
+      <SocialIcons />
+    </div>
+    <ThemeSelect />
+    <LanguageSelect />
+  </div>
 </div>
 
 <script>
@@ -63,24 +63,21 @@ const pathname = Astro.url.pathname;
 </script>
 
 {
-  /* The first-row styles are copied from Starlight's Header.astro so the
-    original layout survives the override; only `.stacked` and `.top-nav`
-    are new. */
+  /* The single-row styles are copied from Starlight's Header.astro so the
+    original layout survives the override; only `.top-nav` and the wrapping
+    behavior are new. */
 }
 <style>
-  .stacked {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-  }
-
+  /* Two rows while stacked: the original header items on top, the tab row
+     wrapped underneath and pushed to the header's bottom border. */
   .header {
     display: flex;
-    gap: var(--sl-nav-gap);
+    flex-wrap: wrap;
+    gap: 0 var(--sl-nav-gap);
     justify-content: space-between;
     align-items: center;
-    height: calc(var(--rs-nav-row) - 2 * var(--sl-nav-pad-y));
+    align-content: space-between;
+    height: 100%;
   }
 
   .title-wrapper {
@@ -105,6 +102,9 @@ const pathname = Astro.url.pathname;
 
   .top-nav {
     display: flex;
+    order: 5;
+    flex-basis: 100%;
+    min-width: 0;
     gap: 1.5rem;
     overflow-x: auto;
     scrollbar-width: none;
@@ -137,10 +137,38 @@ const pathname = Astro.url.pathname;
          search to the right edge, next to the other controls, keeps it in
          the same place everywhere. */
       grid-template-columns: auto 1fr auto;
-      align-content: center;
+      align-content: space-between;
+    }
+    .top-nav {
+      grid-column: 1 / -1;
+      grid-row: 2;
     }
     .search-wrapper {
       justify-content: flex-end;
     }
   }
+
+  /* Wide screens: one row, tabs between the logo and the search box. The
+     tabs stretch to the full header height (the negative margins eat the
+     header padding) so the active underline still touches the bottom
+     border. Below 60rem the search box gets too cramped next to the tabs;
+     keep this breakpoint in sync with --sl-nav-height in custom.css. */
+  @media (min-width: 60rem) {
+    .header {
+      grid-template-columns: auto auto 1fr auto;
+    }
+    .top-nav {
+      grid-column: 2;
+      grid-row: 1;
+      align-self: stretch;
+      align-items: stretch;
+      margin-block: calc(-1 * var(--sl-nav-pad-y));
+      overflow-x: visible;
+    }
+    .top-nav a {
+      display: inline-flex;
+      align-items: center;
+      padding-block: 0;
+    }
+  }
 </style>
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 70f66a8f..404a1c74 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -25,10 +25,13 @@
   --sl-font-mono: "JetBrains Mono";
 }
 
-/* The header holds two rows: Starlight's original row (--rs-nav-row) and the
-   section-tab row below it (src/components/Header.astro). Everything that
-   hangs off the header (sidebar, mobile TOC, drawer) follows automatically,
-   because Starlight positions it all with --sl-nav-height. */
+/* Below 60em the header holds two rows: Starlight's original row
+   (--rs-nav-row) and the section-tab row below it; from 60em up the tabs
+   move into the original row and the header shrinks back to one row
+   (src/components/Header.astro, where the breakpoint must stay in sync).
+   Everything that hangs off the header (sidebar, mobile TOC, drawer)
+   follows automatically, because Starlight positions it all with
+   --sl-nav-height. */
 :root {
   --rs-nav-row: 3.5rem;
   --sl-nav-height: calc(var(--rs-nav-row) + 2.75rem);
@@ -38,6 +41,11 @@
     --rs-nav-row: 4rem;
   }
 }
+@media (min-width: 60em) {
+  :root {
+    --sl-nav-height: var(--rs-nav-row);
+  }
+}
 
 /* JetBrains Mono enables ligatures by default; keep code as plain glyphs. */
 code,