Fix mobile header: restore close icon, remove empty top bar, lock scroll, prevent layout shift#18612
Open
dwahbe wants to merge 1 commit intopulumi:masterfrom
Open
Fix mobile header: restore close icon, remove empty top bar, lock scroll, prevent layout shift#18612dwahbe wants to merge 1 commit intopulumi:masterfrom
dwahbe wants to merge 1 commit intopulumi:masterfrom
Conversation
…oll, prevent layout shift - Drop Tailwind `hidden` from the menu open-state label and switch the toggle override to plain `display` so the rule stays in the components layer (Tailwind v4 utilities layer was beating the override). - Add `hidden lg:block` to the desktop-only links wrapper so its `p-4` doesn't reserve 32px of empty space on mobile. - Lock html overflow while the mobile menu is open and pin the header with `position: fixed` (sticky degrades when html overflow is hidden). - Have the header IntersectionObserver early-return while the menu is open so the menu-induced height change doesn't toggle `is-pinned` and shift the header by 1px. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
CamSoper
approved these changes
Apr 20, 2026
Contributor
CamSoper
left a comment
CamSoper
left a comment
There was a problem hiding this comment.
Thanks @dwahbe -- the writeup made this easy to review. Approving from the docs side. Tagging @cnunciato and @jeffmerrick for a second look since this touches the homepage header.
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
2 participants
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.
Proposed changes
Four small, related fixes to the mobile site header, touching
layouts/partials/header.html,theme/src/scss/_header.scss, andtheme/src/ts/misc.ts.<label>carried the Tailwindhiddenclass. Tailwind v4 puts.hiddenin theutilitieslayer, which beats thedisplay: blockoverride in thecomponentslayer regardless of selector specificity, so the X never rendered. Removedhiddenfrom the markup and replaced@apply hidden/blockwith plaindisplay: none/blockso the toggle override stays in the same layer as its default.Before
After
.top-nav-barwraps its desktop-only links UL in a<div class="w-full p-4">. On mobile the UL ishidden, but the wrapper's 16px top+bottom padding still reserves 32px. Addedhidden lg:blockso the wrapper only takes space at the breakpoint where its content is visible.Before
After
Lock body scroll while the mobile menu is open. Previously the page behind the menu could still scroll. Added
html:has(.mobile-menu-toggle:checked) { overflow: hidden }. Becauseoverflow: hiddenon<html>breaksposition: sticky, the rule also pins.header-containerwithposition: fixedwhile the menu is open so it stays in the viewport regardless of scroll position.Prevent a 1px layout shift when opening the menu. The header's sticky uses
top: -1pxfor IntersectionObserver-based pinned-state detection. When the menu opens, the header grows to100vhand the IO fired and addedis-pinned, which shifted the fixed header up by 1px. The observer now early-returns when the mobile menu toggle is checked, sois-pinneddoesn't flip based on menu state.