Fix web home feed sizing and related issues (close #432) (#475)

* Fix web home feed sizing (close #432)

* Fix lint

* Fix positioning of profile not found error

* Fix load latest on mobile

* Fix overflow issues on mobile web (visible in postthread)

* Fix bottom pad on mobile web

* Remove old comment

src/view/com/util/Views.web.tsx

@@ -35,6 +35,8 @@ export function CenteredView({
 export const FlatList = React.forwardRef(function <ItemT>(
   {
     contentContainerStyle,
+    style,
+    contentOffset,
     ...props
   }: React.PropsWithChildren<FlatListProps<ItemT>>,
   ref: React.Ref<RNFlatList>,
@@ -43,10 +45,25 @@ export const FlatList = React.forwardRef(function <ItemT>(
     contentContainerStyle,
     styles.containerScroll,
   )
+  if (contentOffset && contentOffset?.y !== 0) {
+    // NOTE
+    // we use paddingTop & contentOffset to space around the floating header
+    // but reactnative web puts the paddingTop on the wrong element (style instead of the contentContainer)
+    // so we manually correct it here
+    // -prf
+    style = addStyle(style, {
+      paddingTop: 0,
+    })
+    contentContainerStyle = addStyle(contentContainerStyle, {
+      paddingTop: Math.abs(contentOffset.y),
+    })
+  }
   return (
     <RNFlatList
-      contentContainerStyle={contentContainerStyle}
       ref={ref}
+      contentContainerStyle={contentContainerStyle}
+      style={style}
+      contentOffset={contentOffset}
       {...props}
     />
   )

src/view/com/util/error/ErrorScreen.tsx

@@ -8,6 +8,7 @@ import {Text} from '../text/Text'
 import {colors} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
+import {CenteredView} from '../Views'
 
 export function ErrorScreen({
   title,
@@ -25,7 +26,7 @@ export function ErrorScreen({
   const theme = useTheme()
   const pal = usePalette('error')
   return (
-    <View testID={testID} style={[styles.outer, pal.view]}>
+    <CenteredView testID={testID} style={[styles.outer, pal.view]}>
       <View style={styles.errorIconContainer}>
         <View
           style={[
@@ -72,7 +73,7 @@ export function ErrorScreen({
           </TouchableOpacity>
         </View>
       )}
-    </View>
+    </CenteredView>
   )
 }
 

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -0,0 +1 @@
+export * from './LoadLatestBtnMobile'

src/view/com/util/load-latest/LoadLatestBtn.web.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity} from 'react-native'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {UpIcon} from 'lib/icons'
+import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
+import {isMobileWeb} from 'platform/detection'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
@@ -14,6 +16,9 @@ export const LoadLatestBtn = ({
   label: string
 }) => {
   const pal = usePalette('default')
+  if (isMobileWeb) {
+    return <LoadLatestBtnMobile onPress={onPress} label={label} />
+  }
   return (
     <TouchableOpacity
       style={[pal.view, pal.borderDark, styles.loadLatest]}

src/view/com/util/load-latest/LoadLatestBtnMobile.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, TouchableOpacity} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import LinearGradient from 'react-native-linear-gradient'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
 import {colors, gradients} from 'lib/styles'
 import {clamp} from 'lodash'
 import {useStores} from 'state/index'