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/view/shell/Composer.web.tsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

(limited to 'src/view/shell/Composer.web.tsx')

diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index c0da27da6..e8f7908c2 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -4,7 +4,7 @@ import {StyleSheet, View} from 'react-native'
 import {ComposePost} from '../com/composer/Composer'
 import {ComposerOpts} from 'state/models/ui/shell'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isMobileWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 const BOTTOM_BAR_HEIGHT = 61
 
@@ -26,6 +26,7 @@ export const Composer = observer(
     mention?: ComposerOpts['mention']
   }) => {
     const pal = usePalette('default')
+    const {isMobile} = useWebMediaQueries()
 
     // rendering
     // =
@@ -36,7 +37,13 @@ export const Composer = observer(
 
     return (
       <View style={styles.mask} aria-modal accessibilityViewIsModal>
-        <View style={[styles.container, pal.view, pal.border]}>
+        <View
+          style={[
+            styles.container,
+            isMobile && styles.containerMobile,
+            pal.view,
+            pal.border,
+          ]}>
           <ComposePost
             replyTo={replyTo}
             quote={quote}
@@ -66,11 +73,14 @@ const styles = StyleSheet.create({
     width: '100%',
     paddingVertical: 0,
     paddingHorizontal: 2,
-    borderRadius: isMobileWeb ? 0 : 8,
-    marginBottom: isMobileWeb ? BOTTOM_BAR_HEIGHT : 0,
+    borderRadius: 8,
+    marginBottom: 0,
     borderWidth: 1,
-    maxHeight: isMobileWeb
-      ? `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`
-      : 'calc(100% - (40px * 2))',
+    maxHeight: 'calc(100% - (40px * 2))',
+  },
+  containerMobile: {
+    borderRadius: 0,
+    marginBottom: BOTTOM_BAR_HEIGHT,
+    maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
   },
 })
-- 
cgit 1.4.1