UI elements shifting to right when model opens

[phanendraguptha]

Description

When the search bar modal opens, elements beneath the popup shift to the right. This issue occurs because the DocSearch--active class is added to the body element, causing the scrollbar to disappear, which in turn shifts the layout.
Code causing this issue

React.useEffect(() => {
    document.body.classList.add('DocSearch--active');

    return (): void => {
      document.body.classList.remove('DocSearch--active');

      // IE11 doesn't support `scrollTo` so we check that the method exists
      // first.
      window.scrollTo?.(0, initialScrollY);
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

instead we can use

  useLayoutEffect(() => {
    // Calculate the scrollbar width to compensate for removed scrollbar
    const scrollBarWidth = window.innerWidth - document.body.clientWidth;
    // Prevent layout shift by adding appropriate margin to the body
    document.body.style.marginRight = `${scrollBarWidth}px`;
     
    return (): void => {
      // Reset body styles
      document.body.style.marginRight = '0px';
    }
  }, []);

Steps to reproduce

For Windows

1. Visit the ...
2. Click on search bar
3. Observe how the elements beneath the popup modal shift to the right.

For Mac

1. Change the scrollbar behavior to always visible.
2. Visit the ...
3. Click on search bar
4. Observe how the elements beneath the popup modal shift to the right.

Live reproduction:

demo.mp4

Expected behavior

The elements beneath the popup modal should not shift to the right

Environment

• OS: Windows / Linux / macOS
• Browser: All browsers
• DocSearch version: 3.8.0