Web app does not respond to changing the screen size

[mozzius]

Describe the bug

The web app does not respond to changing screen sizes very well. A prime example is the floaty "Write your reply" bar when you expand the screen from mobile to desktop size, but I'm sure there are many other places.

To Reproduce

Steps to reproduce the behavior:

1. Be on a thread with a <1000px browser window
2. Make you window >1000px

Expected behavior

isDesktopWeb and isMobileWeb should respond to screen size changes.

Screenshots

Details

• Platform: Web

Additional context

The problem is here:

// src/platform/detection.ts
import {Platform} from 'react-native'

export const isIOS = Platform.OS === 'ios'
export const isAndroid = Platform.OS === 'android'
export const isNative = isIOS || isAndroid
export const isWeb = !isNative
export const isMobileWeb =
  isWeb &&
  // @ts-ignore we know window exists -prf
  global.window.matchMedia('only screen and (max-width: 1000px)')?.matches
export const isDesktopWeb = isWeb && !isMobileWeb

isDesktopWeb and isMobileWeb should be replaced by a hook that looks something like this:

export const useWebScreenSize = () => {
  const [isMobile, setIsMobile] = useState(
    isWeb &&
      global.window.matchMedia('only screen and (max-width: 1000px)')?.matches,
  )

  useEffect(() => {
    if (!isWeb) return
    const mediaQuery = global.window.matchMedia(
      'only screen and (max-width: 1000px)',
    )
    const listener = () => setIsMobile(mediaQuery.matches)
    mediaQuery.addEventListener('change', listener)
    return () => mediaQuery.removeEventListener('change', listener)
  }, [])

  return useMemo(
    () => ({
      isMobile,
      isDesktop: !isMobile,
    }),
    [isMobile],
  )
}

[mschwendener]

Related? #1267

[mozzius]

Related? #1267

Yep, but there are ~93 other places this bug affects. That once is just the most obvious one

[mozzius]

Closing in favour of #1267