Stop the mobile nav drawer clipping search and Get Started - #404
Open
seandavi wants to merge 1 commit into
Open
Conversation
.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) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YBSvPwEk6sH1rhGmjPmsFq
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #400.
.header-nav.active(assets/style/sections/header.css:181) set a hardcodedheight: 21remwhile.header-navsetsoverflow: hidden. The drawer contains three things — the nav links, the site search form, and the Get Started button — and at 390 px the six nav links consume the full 21rem on their own. The search box and button rendered below the clip, present in the DOM but unreachable, with no scrollbar because the overflow is hidden rather than auto.The change
max-heightrather thanheight: autospecifically because the drawer animates viatransition: 0.3s—height: autois not animatable,max-heightis.overflow-y: autois a fallback for viewports too short to fit the drawer at all.Measured
Rendered the real
layouts/components/header.htmlmarkup against the real stylesheets in headless Chromium at 390×844, and measured both states:height: 21rem(before)max-height(after)Absolute offsets differ slightly from the figures in #400 because this repro renders the header standalone rather than in a full page, but the clipping reproduces exactly and the fix resolves it.
Not included
#400 also mentions two related clipping/typography problems —
.content { overflow: hidden }inlayouts.css:32and.page-container * { font-size: 1rem }inlearn-and-dev.css:171-173. I've left both alone. Removingoverflow: hiddenfrom.contentcan change layout wherever it is currently containing floats, and the font-size rule affects the whole type scale on small screens; both want a visual pass across pages rather than a blind edit. Happy to do them as a follow-up if someone can eyeball the result.🤖 Generated with Claude Code
https://claude.ai/code/session_01YBSvPwEk6sH1rhGmjPmsFq