fix(header): keep search and theme toggle visible on small laptops#11559
Merged
Conversation
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🟢 🤖 Continuous IntegrationWonderful, this rule succeeded.
🟢 👀 Review RequirementsWonderful, this rule succeeded.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 🔎 ReviewsWonderful, this rule succeeded.
🟢 📕 PR descriptionWonderful, this rule succeeded.
|
There was a problem hiding this comment.
Pull request overview
This PR adjusts the header’s responsive layout so that search and the theme toggle remain visible on “small laptop” widths by preventing the header flex layout from wrapping/clipping, and by reducing the space taken by nav links in intermediate viewports.
Changes:
- Prevent header content from wrapping by switching
.nav-wrappertoflex-wrap: nowrapand removing the prior “second row” responsive rule for.nav-actions. - Add a
.header-btn-labelwrapper around header link text so labels can be visually hidden (icon-only) between 60em–80em while remaining accessible to screen readers. - Hide the nav links entirely under 60em to prioritize search + theme toggle.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/Header/HeaderLink.astro | Wraps link label content in a span so it can be selectively visually hidden at certain breakpoints. |
| src/components/Header/Header.astro | Updates header/nav flex behavior and adds breakpoint-specific rules for hiding nav links and/or their labels. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
jd
force-pushed
the
devs/jd/fix/header-overflow-small-laptop/keep-search-theme-toggle-visible-small-laptops--d5196600
branch
from
81eb46b to
0679d7e
Compare
Member
Author
Revision history
|
JulianMaurin
approved these changes
May 19, 2026
kozlek
approved these changes
May 19, 2026
Contributor
Merge Queue Status
This pull request spent 13 hours 39 minutes 20 seconds in the queue, including 2 minutes 20 seconds running CI. Required conditions to merge
|
51 tasks
mergify
Bot
deleted the
devs/jd/fix/header-overflow-small-laptop/keep-search-theme-toggle-visible-small-laptops--d5196600
branch
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
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.
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: wraprule pushed nav-actions to a second row, where theheader's
overflow: hiddenand fixed height clipped them — so searchand theme toggle vanished on the small-laptop range.
Behavior by viewport:
(kept in the DOM for screen readers and keyboard focus)
Also drop the broken
flex-wrap: wrap+ max-width:35em rule that triedto put nav-actions on a second row inside a fixed-height
overflow-hidden container.
Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com