fix(mosaic): only reserve the scrollbar gutter when the page shows a scrollbar (#10312)

Author: alexcarpenter

.changeset/mosaic-scroll-lock-gutter.md

@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Stop the page from shifting when a Mosaic overlay opens on a page that does not scroll.

packages/mosaic/src/primitives/hooks/__tests__/use-scroll-lock.test.tsx

@@ -55,12 +55,14 @@ const overlays: Array<[string, (open: boolean) => ReactElement]> = [
 
 afterEach(() => {
   cleanup();
+  Reflect.deleteProperty(document.documentElement, 'clientWidth');
   document.documentElement.removeAttribute('style');
   document.body.removeAttribute('style');
 });
 
 describe.each(overlays)('%s scroll lock', (_name, renderOverlay) => {
   it('locks the page and keeps the scrollbar gutter, then restores both on close', async () => {
+    showScrollbar(15);
     const { rerender } = render(renderOverlay(true));
     await screen.findByTestId('content');
 
@@ -73,6 +75,19 @@ describe.each(overlays)('%s scroll lock', (_name, renderOverlay) => {
     expect(document.documentElement.style.cssText).toBe('');
   });
 
+  it('locks the page without reserving a gutter when the page shows no scrollbar', async () => {
+    showScrollbar(0);
+    const { rerender } = render(renderOverlay(true));
+    await screen.findByTestId('content');
+
+    expect(document.body.style.overflowY).toBe('hidden');
+    expect(document.documentElement.style.scrollbarGutter).toBe('');
+
+    rerender(renderOverlay(false));
+
+    expect(document.body.style.cssText).toBe('');
+  });
+
   it('locks <html> instead of <body> when <html> is the element that scrolls', async () => {
     document.documentElement.style.overflowY = 'auto';
     const { rerender } = render(renderOverlay(true));
@@ -122,3 +137,10 @@ describe('select in a dialog', () => {
     expect(document.body.style.cssText).toBe('');
   });
 });
+
+function showScrollbar(width: number): void {
+  Object.defineProperty(document.documentElement, 'clientWidth', {
+    configurable: true,
+    value: window.innerWidth - width,
+  });
+}

packages/mosaic/src/primitives/hooks/use-scroll-lock.ts

@@ -33,7 +33,9 @@ function lockPageScroll(): () => void {
   }
   const previousGutter = html.style.scrollbarGutter;
   const previousOverflow = { overflowX: scroller.style.overflowX, overflowY: scroller.style.overflowY };
-  html.style.scrollbarGutter = 'stable';
+  if (window.innerWidth > html.clientWidth) {
+    html.style.scrollbarGutter = 'stable';
+  }
   Object.assign(scroller.style, { overflowX: 'hidden', overflowY: 'hidden' });
   return () => {
     html.style.scrollbarGutter = previousGutter;