fix(web): support for older browsers like Safari 11 on iOS 13.7

packages/web/src/javascripts/Controllers/PaneController.ts

@@ -21,11 +21,21 @@ export class PaneController {
       setIsInMobileView: action,
     })
 
-    window.matchMedia(MediaQueryBreakpoints.md).addEventListener('change', this.mediumScreenMQHandler)
+    const mediaQuery = window.matchMedia(MediaQueryBreakpoints.md)
+    if (mediaQuery?.addEventListener != undefined) {
+      mediaQuery.addEventListener('change', this.mediumScreenMQHandler)
+    } else {
+      mediaQuery.addListener(this.mediumScreenMQHandler)
+    }
   }
 
   deinit() {
-    window.matchMedia(MediaQueryBreakpoints.md).removeEventListener('change', this.mediumScreenMQHandler)
+    const mq = window.matchMedia(MediaQueryBreakpoints.md)
+    if (mq?.removeEventListener != undefined) {
+      mq.removeEventListener('change', this.mediumScreenMQHandler)
+    } else {
+      mq.removeListener(this.mediumScreenMQHandler)
+    }
   }
 
   mediumScreenMQHandler = (event: MediaQueryListEvent) => {

packages/web/src/javascripts/Hooks/useMediaQuery.tsx

@@ -18,9 +18,21 @@ export const useMediaQuery = (mediaQuery: string) => {
       setMatches(event.matches)
     }
 
-    window.matchMedia(mediaQuery).addEventListener('change', handler)
+    const mq = window.matchMedia(mediaQuery)
+    if (mq.addEventListener != undefined) {
+      mq.addEventListener('change', handler)
+    } else {
+      mq.addListener(handler)
+    }
 
-    return () => window.matchMedia(mediaQuery).removeEventListener('change', handler)
+    return () => {
+      const mq = window.matchMedia(mediaQuery)
+      if (mq.removeEventListener != undefined) {
+        mq.removeEventListener('change', handler)
+      } else {
+        mq.removeListener(handler)
+      }
+    }
   }, [mediaQuery])
 
   return matches