diff --git a/src/content-script/components/chat/chat.tsx b/src/content-script/components/chat/chat.tsx
index 6aca26c..be5bb09 100644
--- a/src/content-script/components/chat/chat.tsx
+++ b/src/content-script/components/chat/chat.tsx
@@ -96,7 +96,7 @@ const Chat: React.FC<ReduxProps> = ({ chatEnabled, partyId, toggleChat, partyUse
             </Flex>
             <Brand headingProps={{ fontWeight: 600 }} />
           </HeaderContainer>
-          <Flex flex={3} overflowY="scroll" padding={2}>
+          <Flex flex={3} overflowY="hidden" padding={2}>
             <MessageList />
           </Flex>
           <MessageBar />
diff --git a/src/content-script/components/message-list/message-list.tsx b/src/content-script/components/message-list/message-list.tsx
index ea9a2dd..c5ea112 100644
--- a/src/content-script/components/message-list/message-list.tsx
+++ b/src/content-script/components/message-list/message-list.tsx
@@ -25,9 +25,19 @@ type ReduxProps = ConnectedProps<typeof connector>;
 const MessageList: React.FC<ReduxProps> = ({ messages }) => {
   const messageRefs = useRef({} as Record<number, HTMLDivElement | null>);
 
+  const isInViewport = (elem: HTMLDivElement | null) => {
+    const bounds = elem?.getBoundingClientRect();
+    if (!bounds) return true;
+    return (
+      bounds.top >= 0 &&
+      // using a magic number of 130
+      bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) - 130
+    );
+  };
+
   useEffect(() => {
     const lastMessageId = messages[messages.length - 1]?.id;
-    if (lastMessageId) {
+    if (lastMessageId && isInViewport(messageRefs.current[lastMessageId])) {
       messageRefs.current[lastMessageId]?.scrollIntoView(false);
     }
   }, [messages]);