diff --git a/web/components/chat/chat-container.tsx b/web/components/chat/chat-container.tsx
index c6eb65ac1..793dbaf23 100644
--- a/web/components/chat/chat-container.tsx
+++ b/web/components/chat/chat-container.tsx
@@ -219,14 +219,17 @@ const ChatContainer = () => {
         )}
 
         <div
-          className={classNames('flex flex-col overflow-hidden', {
-            'w-full h-1/2 md:h-full md:w-1/4 border-t md:border-t-0 md:border-l dark:border-gray-800':
+          className={classNames('flex flex-col', {
+            'w-full h-1/2 md:h-full md:w-1/4 border-t md:border-t-0 md:border-l dark:border-gray-800 overflow-hidden':
               scene === 'chat_dashboard',
-            'w-full h-full px-4 lg:px-8': scene !== 'chat_dashboard',
+            'w-full h-full px-4 lg:px-8 overflow-hidden': scene !== 'chat_dashboard',
           })}
         >
           {/* Wrap the Completion component in a container with a specific height */}
-          <div className='h-full overflow-hidden'>
+          <div className={classNames('h-full', {
+            'overflow-hidden': scene !== 'chat_dashboard',
+            'flex flex-col': scene === 'chat_dashboard'
+          })}>
             <Completion messages={history} onSubmit={handleChat} onFormatContent={formatToVisThinking} />
           </div>
         </div>
diff --git a/web/components/chat/completion.tsx b/web/components/chat/completion.tsx
index 7611b75eb..d84dee18a 100644
--- a/web/components/chat/completion.tsx
+++ b/web/components/chat/completion.tsx
@@ -178,15 +178,44 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
   }, []);
 
   useEffect(() => {
-    setTimeout(() => {
-      scrollableRef.current?.scrollTo(0, scrollableRef.current.scrollHeight);
-    }, 50);
-  }, [messages]);
+    // Scroll to bottom when messages change
+    const scrollToBottom = () => {
+      if (scrollableRef.current) {
+        const element = scrollableRef.current;
+        // Force scroll to bottom using multiple methods
+        element.scrollTop = element.scrollHeight;
+        element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
+        
+        // Additional force scroll for chat_dashboard
+        if (scene === 'chat_dashboard') {
+          requestAnimationFrame(() => {
+            element.scrollTop = element.scrollHeight;
+          });
+        }
+      }
+    };
+    
+    // Use multiple timeouts to ensure scrolling works even with dynamic content
+    setTimeout(scrollToBottom, 50);
+    setTimeout(scrollToBottom, 200);
+    setTimeout(scrollToBottom, 500);
+    
+    // Additional timeout for chat_dashboard
+    if (scene === 'chat_dashboard') {
+      setTimeout(scrollToBottom, 1000);
+    }
+    
+    // Also try immediate scroll
+    scrollToBottom();
+  }, [messages, showMessages, scene]);
 
   return (
     <>
       {contextHolder}
-      <div ref={scrollableRef} className='flex flex-1 overflow-y-auto h-full w-full flex-col'>
+      <div ref={scrollableRef} className={classNames('flex flex-1 overflow-y-auto w-full flex-col', {
+        'h-full': scene !== 'chat_dashboard',
+        'flex-1 min-h-0': scene === 'chat_dashboard'
+      })}>
         <div className='flex items-center flex-1 flex-col text-sm leading-6 text-slate-900 dark:text-slate-300 sm:text-base sm:leading-7'>
           {showMessages.length ? (
             showMessages.map((content, index) => {