From 840c07ddf2c7c758449f0c4451413987f02bff78 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 8 Dec 2023 02:35:40 +0000
Subject: [PATCH] More layouts

---
 .../text-input/web/EmojiPicker.web.tsx        |  6 ++++--
 src/view/com/pager/PagerWithHeader.web.tsx    | 21 ++++++++++++++++---
 src/view/com/util/Toast.web.tsx               |  3 ++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
index 09a2dcf41b..59a3a13928 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -30,7 +30,7 @@ export function EmojiPickerButton() {
 
   return (
     <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
-      <DropdownMenu.Trigger style={styles.trigger}>
+      <DropdownMenu.Trigger style={styles.trigger as React.CSSProperties}>
         <FontAwesomeIcon
           icon={['far', 'face-smile']}
           color={pal.colors.link}
@@ -87,7 +87,8 @@ export function EmojiPicker({close}: {close: () => void}) {
 
 const styles = StyleSheet.create({
   mask: {
-    position: 'absolute',
+    // @ts-ignore web ony
+    position: 'fixed',
     top: 0,
     left: 0,
     right: 0,
@@ -96,6 +97,7 @@ const styles = StyleSheet.create({
   },
   trigger: {
     backgroundColor: 'transparent',
+    // @ts-ignore web only
     border: 'none',
     paddingTop: 4,
     paddingLeft: 12,
diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx
index 27d576b684..c8739dcc48 100644
--- a/src/view/com/pager/PagerWithHeader.web.tsx
+++ b/src/view/com/pager/PagerWithHeader.web.tsx
@@ -12,6 +12,7 @@ import {TabBar} from './TabBar'
 import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 
 const SCROLLED_DOWN_LIMIT = 200
 
@@ -152,12 +153,20 @@ let PagerTabBar = ({
   onSelect?: (index: number) => void
 }): React.ReactNode => {
   const pal = usePalette('default')
+  const {isMobile} = useWebMediaQueries()
   return (
     <>
-      <View style={[styles.headerContainer, pal.border]}>
+      <View style={[!isMobile && styles.headerContainerDesktop, pal.border]}>
         {renderHeader?.()}
       </View>
-      <View style={[styles.tabBarContainer, pal.border]}>
+      <View
+        style={[
+          styles.tabBarContainer,
+          isMobile
+            ? styles.tabBarContainerMobile
+            : styles.tabBarContainerDesktop,
+          pal.border,
+        ]}>
         <TabBar
           testID={testID}
           items={items}
@@ -202,7 +211,7 @@ function PagerItem({
 }
 
 const styles = StyleSheet.create({
-  headerContainer: {
+  headerContainerDesktop: {
     marginLeft: 'auto',
     marginRight: 'auto',
     width: 600,
@@ -215,12 +224,18 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     top: 0,
     zIndex: 1,
+  },
+  tabBarContainerDesktop: {
     marginLeft: 'auto',
     marginRight: 'auto',
     width: 600,
     borderLeftWidth: 1,
     borderRightWidth: 1,
   },
+  tabBarContainerMobile: {
+    paddingLeft: 14,
+    paddingRight: 14,
+  },
 })
 
 function noop() {
diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx
index beb67c30c5..d5a8435412 100644
--- a/src/view/com/util/Toast.web.tsx
+++ b/src/view/com/util/Toast.web.tsx
@@ -64,7 +64,8 @@ export function show(text: string, icon: FontAwesomeProps['icon'] = 'check') {
 
 const styles = StyleSheet.create({
   container: {
-    position: 'absolute',
+    // @ts-ignore web only
+    position: 'fixed',
     left: 20,
     bottom: 20,
     // @ts-ignore web only