3 files changed, 14 insertions, 12 deletions
diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx
index e94a295eb..d93607530 100644
--- a/src/screens/Messages/Conversation/MessageInput.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.tsx
@@ -18,10 +18,10 @@ import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/ico
 
 export function MessageInput({
   onSendMessage,
-  onFocus,
+  scrollToEnd,
 }: {
   onSendMessage: (message: string) => void
-  onFocus?: () => void
+  scrollToEnd: () => void
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -54,8 +54,10 @@ export function MessageInput({
 
       setMaxHeight(max)
       setIsInputScrollable(availableSpace < 30)
+
+      scrollToEnd()
     },
-    [topInset],
+    [scrollToEnd, topInset],
   )
 
   return (
@@ -82,7 +84,7 @@ export function MessageInput({
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
           scrollEnabled={isInputScrollable}
           blurOnSubmit={false}
-          onFocus={onFocus}
+          onFocus={scrollToEnd}
           onContentSizeChange={onInputLayout}
           ref={inputRef}
         />
diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx
index fd13dd851..a2f255bdc 100644
--- a/src/screens/Messages/Conversation/MessageInput.web.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.web.tsx
@@ -11,7 +11,7 @@ export function MessageInput({
   onSendMessage,
 }: {
   onSendMessage: (message: string) => void
-  onFocus: () => void
+  scrollToEnd: () => void
 }) {
   const {_} = useLingui()
   const t = useTheme()
diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index bc64d2b15..7a14979e9 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -168,9 +168,11 @@ export function MessagesList() {
     [contentHeight.value, hasInitiallyScrolled, isAtBottom],
   )
 
-  const onInputFocus = React.useCallback(() => {
-    flatListRef.current?.scrollToEnd({animated: true})
-  }, [flatListRef])
+  const scrollToEnd = React.useCallback(() => {
+    requestAnimationFrame(() =>
+      flatListRef.current?.scrollToEnd({animated: true}),
+    )
+  }, [])
 
   const {bottom: bottomInset} = useSafeAreaInsets()
   const {gtMobile} = useBreakpoints()
@@ -200,6 +202,7 @@ export function MessagesList() {
             maintainVisibleContentPosition={{
               minIndexForVisible: 1,
             }}
+            contentContainerStyle={{paddingHorizontal: 10}}
             removeClippedSubviews={false}
             onContentSizeChange={onContentSizeChange}
             onStartReached={onStartReached}
@@ -215,10 +218,7 @@ export function MessagesList() {
           />
         </ScrollProvider>
       </View>
-      <MessageInput
-        onSendMessage={onSendMessage}
-        onFocus={isWeb ? onInputFocus : undefined}
-      />
+      <MessageInput onSendMessage={onSendMessage} scrollToEnd={scrollToEnd} />
     </KeyboardAvoidingView>
   )
 }