Skip to content

Stabalize scrollbar gutter so the header stops shifting when search opens #3364

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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
enf0rc3 merged 4 commits into from
Aug 17, 2026
Merged

Stabalize scrollbar gutter so the header stops shifting when search opens #3364

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
df07e51
Stop the header shifting when search takes the scrollbar away
enf0rc3 Aug 14, 2026
7f62c19
Reserve the scrollbar gutter instead of compensating in JS
enf0rc3 Aug 14, 2026
b16b2f7
Carry the search dimming across the scrollbar gutter
enf0rc3 Aug 14, 2026
279cc05
Use American spelling in the gutter comment
enf0rc3 Aug 14, 2026
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
15 changes: 15 additions & 0 deletions src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ html[data-theme='dark'] {
html {
box-sizing: border-box;
scroll-padding-block-start: var(--scroll-pad);
/* Search and the mobile nav lock scrolling by hiding the body's overflow,
which takes the scrollbar with it. Holding the gutter open keeps the
viewport a constant width, so the fixed header stays put. */
scrollbar-gutter: stable;
}

*,
Expand Down Expand Up @@ -2434,6 +2438,17 @@ a[data-youtube] {
visibility: visible;
}

/* The overlay is fixed, so it stops at the reserved scrollbar gutter and leaves
that strip showing the undimmed page color once the scrollbar goes. Painting
the same wash onto the canvas carries the dimming across it. */
html:has(.site-search__wrapper.is-active) {
background-color: var(--color-base-primary);
background-image: linear-gradient(
var(--search-overlay),
var(--search-overlay)
);
}

.site-search__icon path {
fill: var(--blue-grey-light);
}
Expand Down