From 5767158737d586fb8b73fa9816975330ceabc8ad Mon Sep 17 00:00:00 2001
From: Yiorgis Gozadinos <ggozadinos@gmail.com>
Date: Fri, 13 Feb 2026 16:42:03 +0200
Subject: [PATCH] Paddings and ui fixes

---
 app/frontend/app/globals.css                      |  1 +
 app/frontend/components/Chat.tsx                  | 15 +++++++++++++++
 .../haiku/rag/chat/widgets/context_modal.py       |  1 +
 3 files changed, 17 insertions(+)

diff --git a/app/frontend/app/globals.css b/app/frontend/app/globals.css
index dc35ede0..501c9629 100644
--- a/app/frontend/app/globals.css
+++ b/app/frontend/app/globals.css
@@ -57,6 +57,7 @@ a {
 
 .chat-input-area {
 	position: relative;
+	padding: 0 0.75rem 0.5rem;
 }
 
 /* Override CopilotKit's absolute positioning on the input container
diff --git a/app/frontend/components/Chat.tsx b/app/frontend/components/Chat.tsx
index 91036f30..89fd4c16 100644
--- a/app/frontend/components/Chat.tsx
+++ b/app/frontend/components/Chat.tsx
@@ -464,7 +464,9 @@ function ChatContentInner({
 	// container, which we've overridden to flow in a flex layout).
 	// Uses a ref callback so it runs when the element actually mounts.
 	const paddingObserver = useRef<MutationObserver | null>(null);
+	const scrollAreaRef = useRef<HTMLDivElement | null>(null);
 	const scrollAreaCallbackRef = useCallback((node: HTMLDivElement | null) => {
+		scrollAreaRef.current = node;
 		if (paddingObserver.current) {
 			paddingObserver.current.disconnect();
 			paddingObserver.current = null;
@@ -487,6 +489,19 @@ function ChatContentInner({
 		paddingObserver.current = observer;
 	}, []);
 
+	// Auto-scroll to bottom when messages change or agent is streaming
+	// biome-ignore lint/correctness/useExhaustiveDependencies: JSON.stringify tracks content changes
+	useEffect(() => {
+		const el = scrollAreaRef.current;
+		if (!el) return;
+		// Find the actual scrollable child (CopilotKit's scroll container)
+		const scrollable =
+			el.querySelector("[data-radix-scroll-area-viewport]") ??
+			el.querySelector("[style*='overflow']") ??
+			el;
+		scrollable.scrollTop = scrollable.scrollHeight;
+	}, [JSON.stringify(agent.messages), agent.isRunning]);
+
 	const sessionContext = chatState.session_context;
 	const documentFilter = chatState.document_filter;
 	const initialContext = chatState.initial_context ?? "";
diff --git a/haiku_rag_slim/haiku/rag/chat/widgets/context_modal.py b/haiku_rag_slim/haiku/rag/chat/widgets/context_modal.py
index 1e155a72..92a17316 100644
--- a/haiku_rag_slim/haiku/rag/chat/widgets/context_modal.py
+++ b/haiku_rag_slim/haiku/rag/chat/widgets/context_modal.py
@@ -69,6 +69,7 @@ class ContextModal(ModalScreen):  # pragma: no cover
 
     #button-row Button {
         margin-left: 1;
+        min-width: 10;
     }
     """