fix(useMediaQuery): adds fallback to matchMedia (#4289)

beta/src/components/Layout/useMediaQuery.tsx

@@ -17,14 +17,29 @@ const useMediaQuery = (width: number) => {
 
   useEffect(() => {
     const media = window.matchMedia(`(max-width: ${width}px)`);
-    media.addEventListener('change', updateTarget);
+
+    try {
+      // Chrome & Firefox
+      media.addEventListener('change', updateTarget);
+    } catch {
+      // @deprecated method - Safari <= iOS12
+      media.addListener(updateTarget);
+    }
 
     // Check on mount (callback is not called until a change occurs)
     if (media.matches) {
       setTargetReached(true);
     }
 
-    return () => media.removeEventListener('change', updateTarget);
+    return () => {
+      try {
+        // Chrome & Firefox
+        media.removeEventListener('change', updateTarget);
+      } catch {
+        // @deprecated method - Safari <= iOS12
+        media.removeListener(updateTarget);
+      }
+    };
   }, [updateTarget, width]);
 
   return targetReached;