Fix chat text box is hidden behind the URL Bar (iOS chrome&safari)

src/alf/atoms.ts

@@ -78,6 +78,15 @@ export const atoms = {
     }),
   ] as ViewStyle,
 
+  util_screen_message_outer: [
+    web({
+      minHeight: 'calc(100vh - 200px)',
+    }),
+    native({
+      height: '100%',
+    }),
+  ],
+
   /*
    * Theme-independent bg colors
    */

src/screens/Messages/Conversation.tsx

@@ -6,10 +6,12 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
+import {isAndroidWeb} from '#/lib/browser'
 import {useEmail} from '#/lib/hooks/useEmail'
 import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController'
 import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {isWeb} from '#/platform/detection'
+import {isIPhoneWeb} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {ConvoProvider, isConvoActive, useConvo} from '#/state/messages/convo'
 import {ConvoStatus} from '#/state/messages/convo/types'
@@ -58,7 +60,13 @@ export function MessagesConversationScreen({route}: Props) {
   )
 
   return (
-    <Layout.Screen testID="convoScreen" style={web([{minHeight: 0}, a.flex_1])}>
+    <Layout.Screen
+      testID="convoScreen"
+      style={web([
+        {minHeight: 0},
+        a.flex_1,
+        (isAndroidWeb || isIPhoneWeb) && a.util_screen_message_outer,
+      ])}>
       <ConvoProvider key={convoId} convoId={convoId}>
         <Inner />
       </ConvoProvider>

src/screens/Messages/components/MessagesList.tsx

@@ -12,6 +12,7 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AppBskyEmbedRecord, AppBskyRichtextFacet, RichText} from '@atproto/api'
 
+import {isAndroidWeb} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
@@ -22,6 +23,7 @@ import {
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {isWeb} from '#/platform/detection'
+import {isIPhoneWeb} from '#/platform/detection'
 import {isConvoActive, useConvoActive} from '#/state/messages/convo'
 import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types'
 import {useGetPost} from '#/state/queries/post'
@@ -34,6 +36,7 @@ import {List, ListMethods} from '#/view/com/util/List'
 import {ChatDisabled} from '#/screens/Messages/components/ChatDisabled'
 import {MessageInput} from '#/screens/Messages/components/MessageInput'
 import {MessageListError} from '#/screens/Messages/components/MessageListError'
+import {atoms as a, web} from '#/alf'
 import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
@@ -405,7 +408,10 @@ export function MessagesList({
           keyExtractor={keyExtractor}
           disableFullWindowScroll={true}
           disableVirtualization={true}
-          style={animatedListStyle}
+          style={[
+            animatedListStyle,
+            web((isIPhoneWeb || isAndroidWeb) && a.util_screen_message_outer),
+          ]}
           // The extra two items account for the header and the footer components
           initialNumToRender={isNative ? 32 : 62}
           maxToRenderPerBatch={isWeb ? 32 : 62}

src/view/shell/index.web.tsx

@@ -5,18 +5,20 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
+import {isAndroidWeb} from '#/lib/browser'
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {NavigationProp} from '#/lib/routes/types'
 import {colors} from '#/lib/styles'
+import {isIPhoneWeb} from '#/platform/detection'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
 import {useCloseAllActiveElements} from '#/state/util'
 import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {atoms as a, select, useTheme} from '#/alf'
+import {atoms as a, select, useTheme, web} from '#/alf'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -92,8 +94,18 @@ function ShellInner() {
 
 export const Shell: React.FC = function ShellImpl() {
   const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)
+  const isMessagesRoute =
+    isAndroidWeb || isIPhoneWeb
+      ? window?.location?.pathname.includes('/messages/')
+      : false
+
   return (
-    <View style={[a.util_screen_outer, pageBg]}>
+    <View
+      style={[
+        a.util_screen_outer,
+        pageBg,
+        web(isMessagesRoute && a.util_screen_message_outer),
+      ]}>
       <RoutesContainer>
         <ShellInner />
       </RoutesContainer>