From b162fc8a4f54675d704d3e71030caed58cce98c2 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Mon, 23 Feb 2026 16:03:32 +0100
Subject: [PATCH] fix: prevent page scroll on load by using container scrollTop
 instead of scrollIntoView in BentoChat

---
 app/components/BentoChat.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/components/BentoChat.tsx b/app/components/BentoChat.tsx
index c82aeb7..46c81f3 100644
--- a/app/components/BentoChat.tsx
+++ b/app/components/BentoChat.tsx
@@ -22,7 +22,7 @@ export default function BentoChat() {
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [conversationId, setConversationId] = useState<string>("default");
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     try {
@@ -44,8 +44,13 @@ export default function BentoChat() {
   }, []);
 
   useEffect(() => {
-    if (messages.length > 0) localStorage.setItem("chatMessages", JSON.stringify(messages));
-    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+    if (messages.length > 0) {
+      localStorage.setItem("chatMessages", JSON.stringify(messages));
+    }
+    
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
   }, [messages]);
 
   const handleSend = async () => {
@@ -73,7 +78,10 @@ export default function BentoChat() {
 
   return (
     <div className="flex flex-col h-full min-h-[300px]">
-      <div className="flex-1 overflow-y-auto pr-2 scrollbar-hide space-y-4 mb-4">
+      <div 
+        ref={containerRef}
+        className="flex-1 overflow-y-auto pr-2 scrollbar-hide space-y-4 mb-4"
+      >
         {messages.map((m) => (
           <div key={m.id} className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}>
             <div className={`max-w-[90%] rounded-2xl px-4 py-2 text-sm shadow-sm ${m.sender === "user" ? "bg-liquid-purple text-white" : "bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-100 dark:border-stone-700"}`}>
@@ -86,7 +94,6 @@ export default function BentoChat() {
             <div className="bg-stone-100 dark:bg-stone-800 rounded-2xl px-4 py-2"><Loader2 size={14} className="animate-spin text-stone-400" /></div>
           </div>
         )}
-        <div ref={scrollRef} />
       </div>
 
       <div className="relative">