fix cumulative layout shift

src/components/jambonz-ui.js

@@ -30,13 +30,8 @@ export function normalizeTextLayout(html) {
     });
 }
 
-// Normalize how we listen for media queries
-// Intentionally `null` default value -- will throw Error
-export function useMatchMedia(mediaQuery = null) {
-  if (!mediaQuery) {
-    throw new Error(`Jambonz UI "useMatchMedia" requires valid Media Query: ${mediaQuery} was passed.`);
-  }
-
+// Normalize for our mobile media query
+export function useMobileMedia() {
   const [mobile, setMobile] = useState(false);
 
   const handleMedia = useCallback((e) => {
@@ -44,7 +39,9 @@ export function useMatchMedia(mediaQuery = null) {
   }, [setMobile]);
 
   useEffect(() => {
-    const mql = window.matchMedia(mediaQuery);
+    const str = window.getComputedStyle(document.documentElement);
+    const qry = str.getPropertyValue('--mobile-media');
+    const mql = window.matchMedia(`(max-width: ${qry})`);
 
     mql.addEventListener('change', handleMedia);
 
@@ -53,16 +50,11 @@ export function useMatchMedia(mediaQuery = null) {
     return function cleanup() {
       mql.removeEventListener('change', handleMedia);
     };
-  }, [handleMedia, setMobile, mediaQuery]);
+  }, [handleMedia, setMobile]);
 
   return mobile;
 }
 
-// Normalize for our mobile media query
-export function useMobileMedia() {
-  return useMatchMedia('(max-width: 896px)');
-}
-
 export function H1({ children, ...rest }) {
   return <h1 {...rest}>{children}</h1>;
 }

src/styles/_navi.scss

@@ -3,8 +3,10 @@
   position: relative;
   z-index: $navi-index;
 
-  &.mobile.active {
-    z-index: $navi-index + 2;
+  &.active {
+    @media ( max-width: $mobile-width ) {
+      z-index: $navi-index + 2;
+    }
   }
 
   // Menu / X icons for mobile nav interactions
@@ -47,7 +49,7 @@
 
   &__links,
   &__login {
-    .mobile & {
+    @media ( max-width: $mobile-width ) {
       display: none;
     }
   }
@@ -61,7 +63,7 @@
       transform: translateY(-5px);
     }
 
-    .mobile & {
+    @media ( max-width: $mobile-width ) {
       display: block;
     }
   }

src/styles/_vars.scss

@@ -1,3 +1,13 @@
+/******************************************************************************
+ * Special mobile layout width
+ * Utilized in src/components/jambonz-ui: useMobileMedia
+*******************************************************************************/
+:root {
+  --mobile-media: 896px;
+}
+
+$mobile-width: 896px;
+
 /******************************************************************************
  * Colors
 *******************************************************************************/