diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index a5d30fd18..1233df306 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -8,7 +8,6 @@ import useSWR from "swr";
 import { Send, Loader2, ImagePlus, Paperclip, X, User, Bot, Plus, History, LayoutGrid, Maximize2, RefreshCw, Globe, Box, ArrowUp, Video, Sparkles, Check, ChevronDown, AlertCircle, CheckCircle2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   DropdownMenu,
@@ -3043,7 +3042,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
   }, [activeChatId]);
 
   return (
-    <div className="flex flex-col h-full bg-background/50 backdrop-blur-sm relative">
+    <div className="relative flex h-full min-h-0 flex-col bg-background/50 backdrop-blur-sm">
       {/* Header - Minimal with Icons */}
       <div className="z-20 ml-auto p-4 flex flex-col items-end gap-2">
         <div className="flex items-center gap-1">
@@ -3141,10 +3140,10 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
       {isDetailEmptyState ? (
         <div className="h-16 shrink-0" />
       ) : (
-      <ScrollArea
+      <div
         key={`${activeChatId}-${messageViewportKey}`}
         className={cn(
-          "flex-1 min-h-0 p-4",
+          "flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-4",
           isDetailGenerationMode && visibleMessages.length === 0
             ? "pt-10"
             : "pt-4"
@@ -3466,7 +3465,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
           
           <div ref={messagesEndRef} />
         </div>
-      </ScrollArea>
+      </div>
       )}
 
       {fullscreenPreview && createPortal(