Paddings and ui fixes

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

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 ?? "";

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;
     }
     """