Include scrollbar width in media calculation

app/scripts/utils/use-media-query.ts

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { useTheme } from 'styled-components';
 import useDimensions from 'react-cool-dimensions';
 import { DevseedUIThemeMediaRanges } from '@devseed-ui/theme-provider';
+import { getScrollbarWidth } from './use-scrollbar-width-css';
 
 interface MediaBreakpointStatus {
   current: keyof DevseedUIThemeMediaRanges;
@@ -82,11 +83,15 @@ export function useMediaQuery() {
     observe(document.body);
   }, [observe]);
 
+  // Account for the scrollbar width because the css media queries will.
+  const scrollbarWidth = getScrollbarWidth();
+
   // On first mount react-cool-dimension will return a width of 0, which breaks
   // the media queries styles because there's a mismatch between the css media
   // queries and the js.
   const width =
-    calculatedWidth || (typeof window !== 'undefined' ? window.innerWidth : 0);
+    calculatedWidth + scrollbarWidth ||
+    (typeof window !== 'undefined' ? window.innerWidth + scrollbarWidth : 0);
 
   const rangeBooleans = useMemo(
     () =>

app/scripts/utils/use-scrollbar-width-css.ts

@@ -1,16 +1,27 @@
 import { useEffect } from 'react';
 
+let scrollbarWidthCache;
+export function getScrollbarWidth() {
+  if (scrollbarWidthCache !== undefined) {
+    return scrollbarWidthCache;
+  }
+
+  const el = document.createElement('div');
+  el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
+  document.body.appendChild(el);
+  const width = el.offsetWidth - el.clientWidth;
+  el.remove();
+
+  scrollbarWidthCache = width;
+  return width;
+}
+
 export function useScrollbarWidthAsCssVar(varName = '--scrollbar-width') {
   useEffect(() => {
-    const el = document.createElement('div');
-    el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
-    document.body.appendChild(el);
-    const width = el.offsetWidth - el.clientWidth;
-    el.remove();
-
+    const width = getScrollbarWidth();
     document.documentElement.style.setProperty(varName, width + 'px');
 
-    () => {
+    return () => {
       document.documentElement.style.removeProperty(varName);
     };
   }, [varName]);