reduce flicker on mobile

src/components/Chat/ChatList.tsx

@@ -32,7 +32,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
       if (virtuosoRef.current) {
 
 
-        if (virtuosoRef.current && !isAtBottomRef.current) {
+        if (virtuosoRef.current && !isAtBottomRef.current && hasUnreadMessages) {
 
    
     
@@ -76,7 +76,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
     })
     const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1
     if (virtuosoRef.current) {
-      virtuosoRef.current.scrollToIndex({ index, behavior: 'smooth' });
+      virtuosoRef.current.scrollToIndex({ index});
     }
   };
 
@@ -126,7 +126,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
     }
 
     return (
-      <div style={{ padding: '10px 0', display: 'flex', justifyContent: 'center', width: '100%' }}>
+      <div style={{ padding: '10px 0', display: 'flex', justifyContent: 'center', width: '100%', minHeight: '50px' ,  overscrollBehavior: "none"}}>
         <MessageItem
           isLast={index === messages.length - 1}
           message={message}
@@ -155,9 +155,9 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
         atBottomThreshold={50}
         followOutput="smooth"
         onScroll={handleScroll}
-        overscan={10}
-        increaseViewportBy={300} 
         atBottomStateChange={handleAtBottomStateChange}  // Detect bottom status
+        increaseViewportBy={3000}
+        
       />
 
       {showScrollButton && (

src/components/Chat/MessageItem.tsx

@@ -13,6 +13,7 @@ import Underline from "@tiptap/extension-underline";
 import { executeEvent } from "../../utils/events";
 import { WrapperUserAction } from "../WrapperUserAction";
 import ReplyIcon from "@mui/icons-material/Reply";
+import { Spacer } from "../../common/Spacer";
 
 export const MessageItem = ({
   message,
@@ -120,9 +121,10 @@ export const MessageItem = ({
           )}
         </Box>
         {reply && (
+          <>
+          <Spacer height="20px" />
           <Box
             sx={{
-              marginTop: '20px',
               width: "100%",
               borderRadius: "5px",
               backgroundColor: "var(--bg-primary)",
@@ -166,6 +168,7 @@ export const MessageItem = ({
               )}
             </Box>
           </Box>
+          </>
         )}
         {message?.messageText && (
           <MessageDisplay