Skip to content

fix(header): keep search and theme toggle visible on small laptops #11559

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 1 commit into from
May 20, 2026
+25 −11
Merged

fix(header): keep search and theme toggle visible on small laptops #11559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 24 additions & 10 deletions src/components/Header/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
}
Comment thread
jd marked this conversation as resolved.

/* 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) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/HeaderLink.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down