Page shifts when opening the Search modal when using scrollbar-gutter
- Dominant language
- TypeScript
- Stars
- 4.4k
- Forks
- 439
- Avg merge
- 14h 32m
- Merged PRs (30d)
- 19
Description
## Description
When the page uses `scrollbar-gutter`, the right margin fix introduced in [v3.8.3](https://github.com/algolia/docsearch/releases/tag/v3.8.3) doesn't account for this.
This leads to extra spacing, effectively reintroducing the issue for users utilizing `scrollbar-gutter`.
## Steps to reproduce
### For Windows
* Visit the https://fylgja.dev/library/base/
* Click on search bar
* Observe how the elements beneath the popup modal shift to the right.
### For Mac
* Change the scrollbar behavior to always visible.
* Visit the https://fylgja.dev/library/base/
* Click on search bar
* Observe how the elements beneath the popup modal shift to the right.
## Expected behavior
Only apply the margin right fix if the page is not using `scrollbar-gutter` on the html tag or make this margin right fix optional
## Environment
- OS: Windows / Linux / macOS
- Browser: All browsers
- DocSearch version: 3.8.3 and newer
## Relates to
* https://github.com/algolia/docsearch/issues/2378
* https://github.com/algolia/docsearch/pull/2413
Contributor guide
Research direction
Reproduce the shift on the fylgja.dev page with scrollbar-gutter enabled, then review the v3.8.3 change and the related issue 2378 and pull request 2413 to locate the margin-right fix. Done means the modal opens without shifting underlying elements when scrollbar-gutter is present, while the existing behavior remains correct otherwise.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100