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/modals/Modal.web.tsx

@@ -3,8 +3,8 @@ import {TouchableWithoutFeedback, StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import type {Modal as ModalIface} from 'state/models/ui/shell'
-import {isMobileWeb} from 'platform/detection'
 
 import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
@@ -47,6 +47,7 @@ export const ModalsContainer = observer(function ModalsContainer() {
 function Modal({modal}: {modal: ModalIface}) {
   const store = useStores()
   const pal = usePalette('default')
+  const {isMobile} = useWebMediaQueries()
 
   if (!store.shell.isModalActive) {
     return null
@@ -119,7 +120,7 @@ function Modal({modal}: {modal: ModalIface}) {
           <View
             style={[
               styles.container,
-              isMobileWeb && styles.containerMobile,
+              isMobile && styles.containerMobile,
               pal.view,
               pal.border,
             ]}>