refactor: Chat Screen UI rendering (#23333)

tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte

@@ -2,10 +2,17 @@
 	import { ArrowDown } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 
-	let { container }: { container: HTMLDivElement | undefined } = $props();
+	interface Props {
+		container: HTMLDivElement | undefined;
+		hasProcessingInfoVisible: boolean;
+	}
+
+	let { container, hasProcessingInfoVisible }: Props = $props();
 
 	let show = $state(false);
 
+	let buttonBottom = $derived(hasProcessingInfoVisible ? '2rem' : '0');
+
 	function checkVisibility() {
 		if (!container) return;
 		const { scrollTop, scrollHeight, clientHeight } = container;
@@ -39,9 +46,11 @@
 		onclick={scrollToBottom}
 		variant="secondary"
 		size="icon"
-		class="h-10 w-10 rounded-full bg-background/80 shadow-lg backdrop-blur-sm transition-all duration-200 hover:bg-muted/80"
+		class="absolute h-10 w-10 rounded-full bg-background/80 shadow-lg backdrop-blur-sm transition-all duration-200 hover:bg-muted/80"
+		style="bottom: {buttonBottom}; transform: translateY({show ? '0' : '2rem'}); opacity: {show
+			? 1
+			: 0};"
 		aria-label="Scroll to bottom"
-		style="transform: translateY({show ? '0' : '20px'}); opacity: {show ? 1 : 0};"
 	>
 		<ArrowDown class="h-4 w-4" />
 	</Button>