From 0679d7ef81a36350f2c4e8867fb0261fc167f672 Mon Sep 17 00:00:00 2001
From: Julien Danjou <julien@danjou.info>
Date: Tue, 19 May 2026 11:03:59 +0200
Subject: [PATCH] fix(header): keep search and theme toggle visible on small
 laptops
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On screens narrower than ~80em, the sidebar (17rem) plus 5 nav links
plus search bar plus theme toggle didn't fit in the header. The
`flex-wrap: wrap` rule pushed nav-actions to a second row, where the
header's `overflow: hidden` and fixed height clipped them — so search
and theme toggle vanished on the small-laptop range.

Behavior by viewport:
- >80em: full label + icon for all 5 nav links
- 60–80em (small laptop): icon-only nav links; labels visually hidden
  (kept in the DOM for screen readers and keyboard focus)
- <60em: nav links hidden entirely

Also drop the broken `flex-wrap: wrap` + max-width:35em rule that tried
to put nav-actions on a second row inside a fixed-height
overflow-hidden container.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Change-Id: Id5196600f9ca7765ada1d956082773ba75f950fc
---
 src/components/Header/Header.astro     | 34 ++++++++++++++++++--------
 src/components/Header/HeaderLink.astro |  2 +-
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index fc8239c2d5..ef201c0cbe 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -147,7 +147,7 @@ const primaryLink = isEnterpriseSection
 		gap: 0.75rem;
 		width: 100%;
 		padding-inline: var(--min-spacing-inline);
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
 	}
 
 	.nav-buttons {
@@ -174,14 +174,6 @@ const primaryLink = isEnterpriseSection
 		flex-shrink: 0;
 	}
 
-	@media (max-width: 35em) {
-		.nav-actions {
-			flex-basis: 100%;
-			margin-left: 0;
-			padding-top: 0.5rem;
-		}
-	}
-
 	/* If the device is likely to show a scrollbar gutter, reserve space for it */
 	@media (hover: hover) {
 		.nav-wrapper {
@@ -243,12 +235,34 @@ const primaryLink = isEnterpriseSection
 		margin: 0;
 	}
 
-	@media (max-width: 68em) {
+	/* Tight viewports: hide the nav links entirely. The sidebar logo +
+	   search + theme toggle already nearly fill the row. Boundary is
+	   exclusive of 60em so the icon-only rule below owns that pixel. */
+	@media (max-width: 59.99em) {
 		.nav-buttons {
 			display: none !important;
 		}
 	}
 
+	/* Intermediate range (~60em–80em): the labels don't fit alongside
+	   search and theme toggle, but the icons still do. Visually hide the
+	   labels — they stay in the DOM so screen readers announce the link
+	   name and keyboard users get a focus target. */
+	@media (min-width: 60em) and (max-width: 80em) {
+		.nav-wrapper :global(.header-btn-label) {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0 0 0 0);
+			clip-path: inset(50%);
+			white-space: nowrap;
+			border: 0;
+		}
+	}
+
 	/* Logo lives in the sidebar on desktop (mirrors mergify-monorepo dashboard);
 	   hide the in-header copy at >=50em where the sidebar logo is visible. */
 	@media (min-width: 50em) {
diff --git a/src/components/Header/HeaderLink.astro b/src/components/Header/HeaderLink.astro
index c0fe5a02cb..d6a6c55ef0 100644
--- a/src/components/Header/HeaderLink.astro
+++ b/src/components/Header/HeaderLink.astro
@@ -12,7 +12,7 @@ const { href, icon, target } = Astro.props as Props;
 
 <div class="header-btn">
 	<Button colorScheme="blue" variant="ghost" icon={icon} href={href} target={target}>
-		<slot />
+		<span class="header-btn-label"><slot /></span>
 	</Button>
 </div>