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, 13 insertions, 7 deletions

diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx
index fd7e383f0..3f43a0aaf 100644
--- a/src/lib/hooks/useWebMediaQueries.tsx
+++ b/src/lib/hooks/useWebMediaQueries.tsx
@@ -2,13 +2,19 @@ import {useMediaQuery} from 'react-responsive'
 import {isNative} from 'platform/detection'
 
 export function useWebMediaQueries() {
-  const isDesktop = useMediaQuery({
-    query: '(min-width: 1224px)',
-  })
-  const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
-  const isMobile = useMediaQuery({query: '(max-width: 800px)'})
+  const isDesktop = useMediaQuery({minWidth: 1300})
+  const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300})
+  const isMobile = useMediaQuery({maxWidth: 800})
+  const isTabletOrMobile = isMobile || isTablet
+  const isTabletOrDesktop = isDesktop || isTablet
   if (isNative) {
-    return {isMobile: true, isTabletOrMobile: true, isDesktop: false}
+    return {
+      isMobile: true,
+      isTablet: false,
+      isTabletOrMobile: true,
+      isTabletOrDesktop: false,
+      isDesktop: false,
+    }
   }
-  return {isMobile, isTabletOrMobile, isDesktop}
+  return {isMobile, isTablet, isTabletOrMobile, isTabletOrDesktop, isDesktop}
 }