From 3214d3893b482a3439dc1eec2031fc1bcf1971ac Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 01:09:09 -0600
Subject: [PATCH] fix chat scroll and button

---
 web/app/appointments/page.js |  4 ++--
 web/app/chat/page.js         | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/app/appointments/page.js b/web/app/appointments/page.js
index 1733fb45..ef3d8e48 100644
--- a/web/app/appointments/page.js
+++ b/web/app/appointments/page.js
@@ -941,6 +941,8 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
               </div>
             )}
 
+            </>)}
+
             <button
               type="submit"
               className="appt-submit-btn"
@@ -952,8 +954,6 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
             {success && <div className="appt-success">{success}</div>}
 
             </>)}
-
-            </>)}
           </form>
         ) : null}
 
diff --git a/web/app/chat/page.js b/web/app/chat/page.js
index f49be420..3a75f41c 100644
--- a/web/app/chat/page.js
+++ b/web/app/chat/page.js
@@ -22,6 +22,7 @@ function ChatPage() {
   const [error, setError] = useState(null);
 
   const messagesEndRef = useRef(null);
+  const messagesAreaRef = useRef(null);
   const inputRef = useRef(null);
   const pollRef = useRef(null);
   const lastMessageIdRef = useRef(null);
@@ -33,7 +34,12 @@ function ChatPage() {
   }, [authLoading, user, router, conversationIdParam]);
 
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    const area = messagesAreaRef.current;
+    if (!area) return;
+    const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;
+    if (nearBottom) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
   }, [messages]);
 
   const fetchMessages = useCallback(async (convId) => {
@@ -330,7 +336,7 @@ function ChatPage() {
               </div>
             )}
 
-            <div style={s.messagesArea}>
+            <div style={s.messagesArea} ref={messagesAreaRef}>
               {messages.length === 0 && (
                 <div style={s.emptyState}>
                   <p style={s.emptyText}>