From 764c7cd5694a41c98d8543b68d7791fa90db4291 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 5 Sep 2023 10:42:19 -0700
Subject: 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/lib/hooks/useWebMediaQueries.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

(limited to 'src/lib/hooks/useWebMediaQueries.tsx')

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}
 }
-- 
cgit 1.4.1