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/composer/Composer.tsx

@@ -37,9 +37,10 @@ import {toShortUrl} from 'lib/strings/url-helpers'
 import {SelectPhotoBtn} from './photos/SelectPhotoBtn'
 import {OpenCameraBtn} from './photos/OpenCameraBtn'
 import {usePalette} from 'lib/hooks/usePalette'
-import QuoteEmbed from '../util/post-embeds/QuoteEmbed'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {useExternalLinkFetch} from './useExternalLinkFetch'
-import {isDesktopWeb, isAndroid, isIOS} from 'platform/detection'
+import {isWeb, isNative, isAndroid, isIOS} from 'platform/detection'
+import QuoteEmbed from '../util/post-embeds/QuoteEmbed'
 import {GalleryModel} from 'state/models/media/gallery'
 import {Gallery} from './photos/Gallery'
 import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
@@ -61,6 +62,7 @@ export const ComposePost = observer(function ComposePost({
 }: Props) {
   const {track} = useAnalytics()
   const pal = usePalette('default')
+  const {isDesktop, isMobile} = useWebMediaQueries()
   const store = useStores()
   const textInput = useRef<TextInputRef>(null)
   const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
@@ -99,9 +101,9 @@ export const ComposePost = observer(function ComposePost({
     () => ({
       paddingBottom:
         isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
-      paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15,
+      paddingTop: isAndroid ? insets.top : isMobile ? 15 : 0,
     }),
-    [insets, isKeyboardVisible],
+    [insets, isKeyboardVisible, isMobile],
   )
 
   const onPressCancel = useCallback(() => {
@@ -143,7 +145,7 @@ export const ComposePost = observer(function ComposePost({
     [onPressCancel],
   )
   useEffect(() => {
-    if (isDesktopWeb) {
+    if (isWeb) {
       window.addEventListener('keydown', onEscape)
       return () => window.removeEventListener('keydown', onEscape)
     }
@@ -240,7 +242,7 @@ export const ComposePost = observer(function ComposePost({
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={styles.outer}>
       <View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
-        <View style={styles.topbar}>
+        <View style={[styles.topbar, isDesktop && styles.topbarDesktop]}>
           <TouchableOpacity
             testID="composerDiscardButton"
             onPress={onPressCancel}
@@ -334,7 +336,12 @@ export const ComposePost = observer(function ComposePost({
             </View>
           ) : undefined}
 
-          <View style={[pal.border, styles.textInputLayout]}>
+          <View
+            style={[
+              pal.border,
+              styles.textInputLayout,
+              isNative && styles.textInputLayoutMobile,
+            ]}>
             <UserAvatar avatar={store.me.avatar} size={50} />
             <TextInput
               ref={textInput}
@@ -362,7 +369,7 @@ export const ComposePost = observer(function ComposePost({
             />
           )}
           {quote ? (
-            <View style={s.mt5}>
+            <View style={[s.mt5, isWeb && s.mb10]}>
               <QuoteEmbed quote={quote} />
             </View>
           ) : undefined}
@@ -395,7 +402,7 @@ export const ComposePost = observer(function ComposePost({
               <OpenCameraBtn gallery={gallery} />
             </>
           ) : null}
-          {isDesktopWeb ? <EmojiPickerButton /> : null}
+          {isDesktop ? <EmojiPickerButton /> : null}
           <View style={s.flex1} />
           <SelectLangBtn />
           <CharProgress count={graphemeLength} />
@@ -414,11 +421,14 @@ const styles = StyleSheet.create({
   topbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingTop: isDesktopWeb ? 10 : undefined,
-    paddingBottom: isDesktopWeb ? 10 : 4,
+    paddingBottom: 4,
     paddingHorizontal: 20,
     height: 55,
   },
+  topbarDesktop: {
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
   postBtn: {
     borderRadius: 20,
     paddingHorizontal: 20,
@@ -465,11 +475,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 15,
   },
   textInputLayout: {
-    flex: isDesktopWeb ? undefined : 1,
     flexDirection: 'row',
     borderTopWidth: 1,
     paddingTop: 16,
   },
+  textInputLayoutMobile: {
+    flex: 1,
+  },
   replyToLayout: {
     flexDirection: 'row',
     borderTopWidth: 1,

src/view/com/composer/Prompt.tsx

@@ -4,11 +4,12 @@ import {UserAvatar} from '../util/UserAvatar'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
-import {isDesktopWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) {
   const store = useStores()
   const pal = usePalette('default')
+  const {isDesktop} = useWebMediaQueries()
   return (
     <TouchableOpacity
       testID="replyPromptBtn"
@@ -22,7 +23,7 @@ export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) {
         type="xl"
         style={[
           pal.text,
-          isDesktopWeb ? styles.labelDesktopWeb : styles.labelMobile,
+          isDesktop ? styles.labelDesktopWeb : styles.labelMobile,
         ]}>
         Write your reply
       </Text>

src/view/com/composer/photos/Gallery.tsx

@@ -7,10 +7,10 @@ import {s, colors} from 'lib/styles'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {Image} from 'expo-image'
 import {Text} from 'view/com/util/text/Text'
-import {isDesktopWeb} from 'platform/detection'
 import {openAltTextModal} from 'lib/media/alt-text'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 interface Props {
   gallery: GalleryModel
@@ -19,13 +19,14 @@ interface Props {
 export const Gallery = observer(function ({gallery}: Props) {
   const store = useStores()
   const pal = usePalette('default')
+  const {isMobile} = useWebMediaQueries()
 
   let side: number
 
   if (gallery.size === 1) {
     side = 250
   } else {
-    side = (isDesktopWeb ? 560 : 350) / gallery.size
+    side = (isMobile ? 350 : 560) / gallery.size
   }
 
   const imageStyle = {
@@ -33,14 +34,14 @@ export const Gallery = observer(function ({gallery}: Props) {
     width: side,
   }
 
-  const isOverflow = !isDesktopWeb && gallery.size > 2
+  const isOverflow = isMobile && gallery.size > 2
 
   const altTextControlStyle = isOverflow
     ? {
         left: 4,
         bottom: 4,
       }
-    : isDesktopWeb && gallery.size < 3
+    : !isMobile && gallery.size < 3
     ? {
         left: 8,
         top: 8,
@@ -60,7 +61,7 @@ export const Gallery = observer(function ({gallery}: Props) {
           right: 4,
           gap: 4,
         }
-      : isDesktopWeb && gallery.size < 3
+      : !isMobile && gallery.size < 3
       ? {
           top: 8,
           right: 8,