Reserve space for scrollbars in sidebar to avoid layout shift#3797
Open
Reserve space for scrollbars in sidebar to avoid layout shift#3797
Conversation
🦋 Changeset detectedLatest commit: 9e6b674 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
size-limit report 📦
|
ematipico
approved these changes
Mar 31, 2026
kevinzunigacuellar
approved these changes
Mar 31, 2026
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
4 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.
Description
scrollbar-gutter: stableto our sidebar to ensure space is reserved for a scrollbar and avoid layout shift when sidebar groups are expanded, overflowing the viewportUser agents vary in how they render scrollbars. Some, like macOS with a trackpad, are designed to appear and disappear and overlay on top of the UI. For these devices, this PR doesn’t change anything:
However, in other circumstances, scrollbars require a gutter which is deducted from an element’s width (with padding etc. applied from the gutter’s edge). In these cases, the change in this PR reserves that gutter space even for sidebars that do not overflow the viewport:
Note the additional whitespace between the group carets and the sidebar border in the “after” screenshot.
This isn’t an amazing change to have to make: for sites whose scrollbar never overflows, user agents that need it will still reserve that extra space, unbalancing the layout pointlessly. Having the even padding on both sides of the scrollbar would be visually more pleasing, I think.
There is also the
scrollbar-gutter: stable both-edgesvariant, which while balancing spacing either side of the scrollbar content, would introduce a lot of extra whitespace on the outer edge. You would think you might be able to adjust for that with padding but a) we don’t know when a gutter is reserved and when not and b) we don’t know the gutter width to know how much to reduce padding by.So it’s a choice between prettier layout and avoiding layout shift when users interact. On balance, it’s probably worth avoiding layout shift and there are design solutions we could explore to lessen the visual impact (such as removing the border for example).