fix: use-mobile hook crashes on older Safari without MediaQueryList.addEventListener

web-app/src/hooks/__tests__/use-mobile.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useIsMobile } from '../use-mobile'
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.useRealTimers()
+})
+
+describe('useIsMobile', () => {
+  it('returns false on a wide screen', () => {
+    Object.defineProperty(window, 'innerWidth', { value: 1024, writable: true })
+    const mql = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }
+    vi.spyOn(window, 'matchMedia').mockReturnValue(mql as any)
+
+    const { result } = renderHook(() => useIsMobile())
+    expect(result.current).toBe(false)
+  })
+
+  it('returns true on a narrow screen', () => {
+    Object.defineProperty(window, 'innerWidth', { value: 400, writable: true })
+    const mql = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }
+    vi.spyOn(window, 'matchMedia').mockReturnValue(mql as any)
+
+    const { result } = renderHook(() => useIsMobile())
+    expect(result.current).toBe(true)
+  })
+
+  it('falls back to deprecated addListener on older browsers that lack addEventListener on MediaQueryList', () => {
+    const consoleWarnSpy = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {})
+
+    const mql = {
+      addEventListener: vi.fn(() => {
+        throw new Error('addEventListener not supported on MediaQueryList')
+      }),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+    }
+    vi.spyOn(window, 'matchMedia').mockReturnValue(mql as any)
+    Object.defineProperty(window, 'innerWidth', { value: 1024, writable: true })
+
+    renderHook(() => useIsMobile())
+
+    expect(mql.addListener).toHaveBeenCalledWith(expect.any(Function))
+    consoleWarnSpy.mockRestore()
+  })
+
+  it('removes the deprecated listener on unmount in older browsers', () => {
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const mql = {
+      addEventListener: vi.fn(() => {
+        throw new Error('addEventListener not supported')
+      }),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+    }
+    vi.spyOn(window, 'matchMedia').mockReturnValue(mql as any)
+    Object.defineProperty(window, 'innerWidth', { value: 1024, writable: true })
+
+    const { unmount } = renderHook(() => useIsMobile())
+    unmount()
+
+    expect(mql.removeListener).toHaveBeenCalledWith(expect.any(Function))
+  })
+})

web-app/src/hooks/use-mobile.ts

@@ -2,6 +2,31 @@ import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
 
+type MediaQueryCallback = (event: { matches: boolean; media: string }) => void
+
+/**
+ * Older versions of Safari (shipped with Catalina and before) do not support
+ * addEventListener on MediaQueryList — they only implement the deprecated
+ * addListener/removeListener pair. Use the same try/catch fallback pattern as
+ * useMediaQuery.ts so the hook doesn't crash on those platforms.
+ */
+function attachMediaListener(
+  query: MediaQueryList,
+  callback: MediaQueryCallback
+) {
+  try {
+    query.addEventListener("change", callback)
+    return () => query.removeEventListener("change", callback)
+  } catch (e) {
+    console.warn(e)
+    // @ts-expect-error — addListener is deprecated but still present on older browsers
+    query.addListener(callback)
+    return () =>
+      // @ts-expect-error
+      query.removeListener(callback)
+  }
+}
+
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
@@ -10,9 +35,9 @@ export function useIsMobile() {
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     }
-    mql.addEventListener("change", onChange)
+    const cleanup = attachMediaListener(mql, onChange)
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
+    return cleanup
   }, [])
 
   return !!isMobile