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/pager/FeedsTabBar.web.tsx

@@ -13,8 +13,8 @@ export const FeedsTabBar = observer(
   (
     props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
   ) => {
-    const {isDesktop} = useWebMediaQueries()
-    if (!isDesktop) {
+    const {isMobile} = useWebMediaQueries()
+    if (isMobile) {
       return <FeedsTabBarMobile {...props} />
     } else {
       return <FeedsTabBarDesktop {...props} />

src/view/com/pager/TabBar.tsx

@@ -3,7 +3,8 @@ import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native'
 import {Text} from '../util/text/Text'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb, isMobileWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {isWeb} from 'platform/detection'
 import {DraggableScrollView} from './DraggableScrollView'
 
 export interface TabBarProps {
@@ -30,6 +31,7 @@ export function TabBar({
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
     [indicatorColor, pal],
   )
+  const {isDesktop, isTablet} = useWebMediaQueries()
 
   // scrolls to the selected item when the page changes
   useEffect(() => {
@@ -61,6 +63,7 @@ export function TabBar({
     [],
   )
 
+  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
   return (
     <View testID={testID} style={[pal.view, styles.outer]}>
       <DraggableScrollView
@@ -78,7 +81,7 @@ export function TabBar({
               hoverStyle={pal.viewLight}
               onPress={() => onPressItem(i)}>
               <Text
-                type={isDesktopWeb ? 'xl-bold' : 'lg-bold'}
+                type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
                 testID={testID ? `${testID}-${item}` : undefined}
                 style={selected ? pal.text : pal.textLight}>
                 {item}
@@ -91,46 +94,46 @@ export function TabBar({
   )
 }
 
-const styles = isDesktopWeb
-  ? StyleSheet.create({
-      outer: {
-        flexDirection: 'row',
-        width: 598,
-      },
-      contentContainer: {
-        columnGap: 8,
-        marginLeft: 14,
-        paddingRight: 14,
-        backgroundColor: 'transparent',
-      },
-      item: {
-        paddingTop: 14,
-        paddingBottom: 12,
-        paddingHorizontal: 10,
-        borderBottomWidth: 3,
-        borderBottomColor: 'transparent',
-        justifyContent: 'center',
-      },
-    })
-  : StyleSheet.create({
-      outer: {
-        flex: 1,
-        flexDirection: 'row',
-        backgroundColor: 'transparent',
-        maxWidth: '100%',
-      },
-      contentContainer: {
-        columnGap: isMobileWeb ? 0 : 20,
-        marginLeft: isMobileWeb ? 0 : 18,
-        paddingRight: isMobileWeb ? 0 : 36,
-        backgroundColor: 'transparent',
-      },
-      item: {
-        paddingTop: 10,
-        paddingBottom: 10,
-        paddingHorizontal: isMobileWeb ? 8 : 0,
-        borderBottomWidth: 3,
-        borderBottomColor: 'transparent',
-        justifyContent: 'center',
-      },
-    })
+const desktopStyles = StyleSheet.create({
+  outer: {
+    flexDirection: 'row',
+    width: 598,
+  },
+  contentContainer: {
+    columnGap: 8,
+    marginLeft: 14,
+    paddingRight: 14,
+    backgroundColor: 'transparent',
+  },
+  item: {
+    paddingTop: 14,
+    paddingBottom: 12,
+    paddingHorizontal: 10,
+    borderBottomWidth: 3,
+    borderBottomColor: 'transparent',
+    justifyContent: 'center',
+  },
+})
+
+const mobileStyles = StyleSheet.create({
+  outer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'transparent',
+    maxWidth: '100%',
+  },
+  contentContainer: {
+    columnGap: isWeb ? 0 : 20,
+    marginLeft: isWeb ? 0 : 18,
+    paddingRight: isWeb ? 0 : 36,
+    backgroundColor: 'transparent',
+  },
+  item: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingHorizontal: isWeb ? 8 : 0,
+    borderBottomWidth: 3,
+    borderBottomColor: 'transparent',
+    justifyContent: 'center',
+  },
+})