Clipclop tweaks (#3851)

* scroll on input resize

* add back the padding 🙊

* fix timestamps

1 files changed, 7 insertions, 7 deletions

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>
   )
 }