[APP-686] Fix mobile web styling (#876)

* fix desktop window size

* fix desktop window size

* add listener for resize events

* fix when going from mobile to web

* only add eventListener for web

2 files changed, 28 insertions, 7 deletions

diff --git a/src/platform/detection.ts b/src/platform/detection.ts
index 5d2ffcb22..da33fdca7 100644
--- a/src/platform/detection.ts
+++ b/src/platform/detection.ts
@@ -4,8 +4,9 @@ export const isIOS = Platform.OS === 'ios'
 export const isAndroid = Platform.OS === 'android'
 export const isNative = isIOS || isAndroid
 export const isWeb = !isNative
+export const isMobileWebMediaQuery = 'only screen and (max-width: 1230px)'
 export const isMobileWeb =
   isWeb &&
   // @ts-ignore we know window exists -prf
-  global.window.matchMedia('only screen and (max-width: 1000px)')?.matches
+  global.window.matchMedia(isMobileWebMediaQuery)?.matches
 export const isDesktopWeb = isWeb && !isMobileWeb
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index f18e9d3ae..4b90c2147 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -21,9 +21,13 @@ import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
-import {isDesktopWeb} from 'platform/detection'
+import {isDesktopWeb, isMobileWebMediaQuery, isWeb} from 'platform/detection'
 
-const HEADER_OFFSET = isDesktopWeb ? 50 : 78
+const HEADER_OFFSET_MOBILE = 78
+const HEADER_OFFSET_DESKTOP = 50
+const HEADER_OFFSET = isDesktopWeb
+  ? HEADER_OFFSET_DESKTOP
+  : HEADER_OFFSET_MOBILE
 const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
@@ -152,6 +156,7 @@ const FeedPage = observer(
     const [onMainScroll, isScrolledDown, resetMainScroll] =
       useOnMainScroll(store)
     const {screen, track} = useAnalytics()
+    const [headerOffset, setHeaderOffset] = React.useState(HEADER_OFFSET)
     const scrollElRef = React.useRef<FlatList>(null)
     const {appState} = useAppState({
       onForeground: () => doPoll(true),
@@ -177,9 +182,9 @@ const FeedPage = observer(
     )
 
     const scrollToTop = React.useCallback(() => {
-      scrollElRef.current?.scrollToOffset({offset: -HEADER_OFFSET})
+      scrollElRef.current?.scrollToOffset({offset: -headerOffset})
       resetMainScroll()
-    }, [scrollElRef, resetMainScroll])
+    }, [headerOffset, resetMainScroll])
 
     const onSoftReset = React.useCallback(() => {
       if (isPageFocused) {
@@ -188,6 +193,17 @@ const FeedPage = observer(
       }
     }, [isPageFocused, scrollToTop, feed])
 
+    // listens for resize events
+    const listenForResize = React.useCallback(() => {
+      // @ts-ignore we know window exists -prf
+      const isMobileWeb = global.window.matchMedia(
+        isMobileWebMediaQuery,
+      )?.matches
+      setHeaderOffset(
+        isMobileWeb ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP,
+      )
+    }, [])
+
     // fires when screen is activated/deactivated
     // - set up polls/listeners, update content
     useFocusEffect(
@@ -229,7 +245,11 @@ const FeedPage = observer(
       if (isPageFocused && isScreenFocused) {
         feed.checkForLatest()
       }
-    }, [isPageFocused, isScreenFocused, feed])
+      isWeb && window.addEventListener('resize', listenForResize)
+      return () => {
+        isWeb && window.removeEventListener('resize', listenForResize)
+      }
+    }, [isPageFocused, isScreenFocused, feed, listenForResize])
 
     const onPressCompose = React.useCallback(() => {
       track('HomeScreen:PressCompose')
@@ -258,7 +278,7 @@ const FeedPage = observer(
           onScroll={onMainScroll}
           scrollEventThrottle={100}
           renderEmptyState={renderEmptyState}
-          headerOffset={HEADER_OFFSET}
+          headerOffset={headerOffset}
         />
         {(isScrolledDown || hasNew) && (
           <LoadLatestBtn