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

1 files changed, 6 insertions, 4 deletions

diff --git a/src/view/screens/ModerationMuteLists.tsx b/src/view/screens/ModerationMuteLists.tsx
index c2771290f..bc933c24e 100644
--- a/src/view/screens/ModerationMuteLists.tsx
+++ b/src/view/screens/ModerationMuteLists.tsx
@@ -15,9 +15,9 @@ import {ListsList} from 'view/com/lists/ListsList'
 import {Button} from 'view/com/util/forms/Button'
 import {NavigationProp} from 'lib/routes/types'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {CenteredView} from 'view/com/util/Views'
 import {ViewHeader} from 'view/com/util/ViewHeader'
-import {isDesktopWeb} from 'platform/detection'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -26,6 +26,7 @@ type Props = NativeStackScreenProps<
 export const ModerationMuteListsScreen = withAuthRequired(({}: Props) => {
   const pal = usePalette('default')
   const store = useStores()
+  const {isTabletOrDesktop} = useWebMediaQueries()
   const navigation = useNavigation<NavigationProp>()
 
   const mutelists: ListsListModel = React.useMemo(
@@ -89,7 +90,7 @@ export const ModerationMuteListsScreen = withAuthRequired(({}: Props) => {
         styles.container,
         pal.view,
         pal.border,
-        isDesktopWeb && styles.containerDesktop,
+        isTabletOrDesktop && styles.containerDesktop,
       ]}
       testID="moderationMutelistsScreen">
       <ViewHeader
@@ -99,7 +100,7 @@ export const ModerationMuteListsScreen = withAuthRequired(({}: Props) => {
       />
       <ListsList
         listsList={mutelists}
-        showAddBtns={isDesktopWeb}
+        showAddBtns={isTabletOrDesktop}
         renderEmptyState={renderEmptyState}
         onPressCreateNew={onPressNewMuteList}
       />
@@ -110,11 +111,12 @@ export const ModerationMuteListsScreen = withAuthRequired(({}: Props) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingBottom: isDesktopWeb ? 0 : 100,
+    paddingBottom: 100,
   },
   containerDesktop: {
     borderLeftWidth: 1,
     borderRightWidth: 1,
+    paddingBottom: 0,
   },
   createBtn: {
     width: 40,