Updates to use dynamic/responsive styles on web (#1351)

* Move most responsive queries to the hook

* Fix invalid CSS value

* Fixes to tablet render of post thread

* Fix overflow issues on web

* Fix search header on tablet

* Fix QP margin in web composer

* Fix: only apply double gutter once to flatlist (close #1368)

* Fix styles on discover feeds header

* Fix double discover links in multifeed

src/view/com/post-thread/PostThread.tsx

@@ -18,18 +18,24 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 import {PostThreadItem} from './PostThreadItem'
 import {ComposePrompt} from '../composer/Prompt'
+import {ViewHeader} from '../util/ViewHeader'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Text} from '../util/text/Text'
 import {s} from 'lib/styles'
-import {isIOS, isDesktopWeb, isMobileWeb} from 'platform/detection'
+import {isIOS, isDesktopWeb} from 'platform/detection'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {useNavigation} from '@react-navigation/native'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {NavigationProp} from 'lib/routes/types'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 
 const MAINTAIN_VISIBLE_CONTENT_POSITION = {minIndexForVisible: 0}
 
+const TOP_COMPONENT = {
+  _reactKey: '__top_component__',
+  _isHighlightedPost: false,
+}
 const PARENT_SPINNER = {
   _reactKey: '__parent_spinner__',
   _isHighlightedPost: false,
@@ -47,6 +53,7 @@ const BOTTOM_COMPONENT = {
 }
 type YieldedItem =
   | PostThreadItemModel
+  | typeof TOP_COMPONENT
   | typeof PARENT_SPINNER
   | typeof REPLY_PROMPT
   | typeof DELETED
@@ -63,13 +70,14 @@ export const PostThread = observer(function PostThread({
   onPressReply: () => void
 }) {
   const pal = usePalette('default')
+  const {isTablet} = useWebMediaQueries()
   const ref = useRef<FlatList>(null)
   const hasScrolledIntoView = useRef<boolean>(false)
   const [isRefreshing, setIsRefreshing] = React.useState(false)
   const navigation = useNavigation<NavigationProp>()
   const posts = React.useMemo(() => {
     if (view.thread) {
-      const arr = Array.from(flattenThread(view.thread))
+      const arr = [TOP_COMPONENT].concat(Array.from(flattenThread(view.thread)))
       if (view.isLoadingFromCache) {
         if (view.thread?.postRecord?.reply) {
           arr.unshift(PARENT_SPINNER)
@@ -158,7 +166,9 @@ export const PostThread = observer(function PostThread({
 
   const renderItem = React.useCallback(
     ({item, index}: {item: YieldedItem; index: number}) => {
-      if (item === PARENT_SPINNER) {
+      if (item === TOP_COMPONENT) {
+        return isTablet ? <ViewHeader title="Post" /> : null
+      } else if (item === PARENT_SPINNER) {
         return (
           <View style={styles.parentSpinner}>
             <ActivityIndicator />
@@ -186,19 +196,8 @@ export const PostThread = observer(function PostThread({
         // HACK
         // due to some complexities with how flatlist works, this is the easiest way
         // I could find to get a border positioned directly under the last item
-        // -
-        // addendum -- it's also the best way to get mobile web to add padding
-        // at the bottom of the thread since paddingbottom is ignored. yikes.
         // -prf
-        return (
-          <View
-            style={[
-              styles.bottomBorder,
-              pal.border,
-              isMobileWeb && styles.bottomSpacer,
-            ]}
-          />
-        )
+        return <View style={[pal.border, styles.bottomSpacer]} />
       } else if (item === CHILD_SPINNER) {
         return (
           <View style={styles.childSpinner}>
@@ -219,7 +218,7 @@ export const PostThread = observer(function PostThread({
       }
       return <></>
     },
-    [onRefresh, onPressReply, pal, posts],
+    [onRefresh, onPressReply, pal, posts, isTablet],
   )
 
   // loading
@@ -331,7 +330,6 @@ export const PostThread = observer(function PostThread({
       }
       onScrollToIndexFailed={onScrollToIndexFailed}
       style={s.hContentRegion}
-      contentContainerStyle={styles.contentContainerExtra}
     />
   )
 })
@@ -384,13 +382,8 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
   },
   childSpinner: {},
-  bottomBorder: {
-    borderBottomWidth: 1,
-  },
   bottomSpacer: {
     height: 400,
-  },
-  contentContainerExtra: {
-    paddingBottom: 500,
+    borderTopWidth: 1,
   },
 })