algolia / algolia/docsearch

Page shifts when opening the Search modal when using scrollbar-gutter

Open
#2,546 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.