Reserve the scrollbar gutter so the header stops shifting when search opens - #3364
Draft
enf0rc3 wants to merge 4 commits into
Draft
Reserve the scrollbar gutter so the header stops shifting when search opens#3364enf0rc3 wants to merge 4 commits into
enf0rc3 wants to merge 4 commits into
Conversation
Focusing the search hides the body overflow, which removes the scrollbar and widens the viewport. The header is fixed, so it grew with the viewport and its contents moved 15px to the right. Measure the scrollbar width at lock time and hold that space open on the body and the header until unlock. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Reverts the search-specific compensation in favour of scrollbar-gutter: stable on html. The viewport then keeps a constant width whenever a scroll lock hides the body overflow, so the fixed header stays put for search, the mobile nav and anything added later. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Pull request environment is available at https://stoctodocspr3364.z22.web.core.windows.net. You can view the ephemeral environment status in Octopus Deploy. This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity. |
The overlay is fixed, so it stops at the reserved gutter. Once the scrollbar goes that strip kept the undimmed page colour, showing as a pale bar down the right edge in light mode. Painting the same wash onto the canvas covers it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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.
Focusing the search hides the body overflow to lock scrolling. That takes the scrollbar with it and widens the viewport, so both fixed headers grew and their contents jumped 15px to the right.
scrollbar-gutter: stableonhtmlholds that width open, so the viewport stays a constant width whenever anything locks scrolling.Measured on
/docs/: the old header and the new TopNav both shifted 14.86px before, 0px after. No change while the search is closed.scrollbar.jsnow measures a 0px delta, so its own compensation becomes a no-op.🤖 Generated with Claude Code