diff --git a/chat/src/components/message-list.tsx b/chat/src/components/message-list.tsx
index d675a85..c97e803 100644
--- a/chat/src/components/message-list.tsx
+++ b/chat/src/components/message-list.tsx
@@ -20,12 +20,6 @@ interface MessageListProps {
 
 export default function MessageList({ messages }: MessageListProps) {
   const scrollAreaRef = useRef<HTMLDivElement>(null);
-  // Avoid the message list to change its height all the time. It causes some
-  // flickering in the screen because some messages, as the ones displaying
-  // progress statuses, are changing the content(the number of lines) and size
-  // constantily. To minimize it, we keep track of the biggest scroll height of
-  // the content, and use that as the min height of the scroll area.
-  const contentMinHeight = useRef(0);
 
   // Track if user is at bottom - default to true for initial scroll
   const isAtBottomRef = useRef(true);
@@ -67,11 +61,6 @@ export default function MessageList({ messages }: MessageListProps) {
     const isNewUserMessage =
       messages.length > 0 && messages[messages.length - 1].role === "user";
 
-    // Update content min height if needed
-    if (currentScrollHeight > contentMinHeight.current) {
-      contentMinHeight.current = currentScrollHeight;
-    }
-
     // Auto-scroll only if:
     // 1. It's the first render, OR
     // 2. There's new content AND user was at the bottom, OR
@@ -104,9 +93,7 @@ export default function MessageList({ messages }: MessageListProps) {
   return (
     <div className="overflow-y-auto flex-1" ref={scrollAreaRef}>
       <div
-        className="p-4 flex flex-col gap-4 max-w-4xl mx-auto"
-        style={{ minHeight: contentMinHeight.current }}
-      >
+        className="p-4 flex flex-col gap-4 max-w-4xl mx-auto transition-all duration-300 ease-in-out min-h-0">
         {messages.map((message) => (
           <div
             key={message.id ?? "draft"}