From ba4529e29da9428314e2e537528b5bb314041693 Mon Sep 17 00:00:00 2001 From: Sean Davis Date: Mon, 27 Jul 2026 08:06:56 -0600 Subject: [PATCH] Stop the mobile nav drawer clipping search and Get Started .header-nav.active had a hardcoded height: 21rem with overflow: hidden. The drawer contains the nav links, the site search form and the Get Started button; at 390px the six links consume the full 21rem, so the last two children rendered below the clip and could not be scrolled to. Switch to max-height so the drawer sizes to its content, with overflow-y: auto as a fallback on very short viewports. max-height keeps the existing 0.3s open/close transition working, which a height: auto would not. Measured at 390x844: the old rule clipped the drawer to 336px against 440px of content, hiding both the search box and the button; with max-height the drawer is 457px and both are within bounds. Fixes #400 Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01YBSvPwEk6sH1rhGmjPmsFq --- assets/style/sections/header.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/assets/style/sections/header.css b/assets/style/sections/header.css index d8d7c0c41..c785a8007 100644 --- a/assets/style/sections/header.css +++ b/assets/style/sections/header.css @@ -171,14 +171,19 @@ input:focus::placeholder { transition: 0.3s; gap: 0; top: 100%; - height: 2px; + max-height: 0; overflow: hidden; opacity: 0; } .header-nav.active { opacity: 1; - height: 21rem; + /* max-height rather than a fixed height: the drawer holds the nav links, + the search box and the Get Started button, and a hard 21rem clipped the + last two out of view with no way to scroll to them. Sizing to content + keeps them reachable however many nav items there are. */ + max-height: 100vh; + overflow-y: auto; } .nav-mobile {