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/search/HeaderWithInput.tsx

@@ -10,6 +10,7 @@ import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {HITSLOP_10} from 'lib/constants'
 
 interface Props {
@@ -37,6 +38,7 @@ export function HeaderWithInput({
   const pal = usePalette('default')
   const {track} = useAnalytics()
   const textInput = React.useRef<TextInput>(null)
+  const {isMobile} = useWebMediaQueries()
 
   const onPressMenu = React.useCallback(() => {
     track('ViewHeader:MenuButtonClicked')
@@ -49,8 +51,14 @@ export function HeaderWithInput({
   }, [onPressCancelSearch, textInput])
 
   return (
-    <View style={[pal.view, pal.border, styles.header]}>
-      {showMenu ? (
+    <View
+      style={[
+        pal.view,
+        pal.border,
+        styles.header,
+        !isMobile && styles.headerDesktop,
+      ]}>
+      {showMenu && isMobile ? (
         <TouchableOpacity
           testID="viewHeaderBackOrMenuBtn"
           onPress={onPressMenu}
@@ -85,7 +93,7 @@ export function HeaderWithInput({
           onBlur={() => setIsInputFocused(false)}
           onChangeText={onChangeQuery}
           onSubmitEditing={onSubmitQuery}
-          autoFocus={true}
+          autoFocus={isMobile}
           accessibilityRole="search"
           accessibilityLabel="Search"
           accessibilityHint=""
@@ -127,6 +135,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 4,
   },
+  headerDesktop: {
+    borderWidth: 1,
+    borderTopWidth: 0,
+    paddingVertical: 10,
+  },
   headerMenuBtn: {
     width: 30,
     height: 30,