fix(ui): compensate for scrollbar (#2413)

fixes #2378
algolia · Jan 21, 2025 · db8edeb · db8edeb
1 parent 50de4d9
commit db8edeb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -10,7 +10,7 @@
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "35.08 kB"
+      "maxSize": "35.5 kB"
     }
   ]
 }
diff --git a/cypress/e2e/search/actions.spec.ts b/cypress/e2e/search/actions.spec.ts
@@ -9,6 +9,10 @@ describe('Start', () => {
   it('Open modal on search button click', () => {
     cy.openModal();
     cy.modalIsVisibleAndFocused();
+
+    // check that the scrollbar offset is compensated
+    cy.get('body').should('have.css', 'overflow', 'hidden');
+    cy.get('body').should('have.css', 'margin-right', '15px');
   });
 
   it('Open modal with key shortcut on Windows/Linux', () => {

diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -350,6 +350,17 @@ export function DocSearchModal({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  React.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 => {
+      document.body.style.marginRight = '0px';
+    };
+  }, []);
+
   React.useEffect(() => {
     const isMobileMediaQuery = window.matchMedia('(max-width: 768px)');