fix(ui): scroll chat to bottom on page load and refresh

commit: d9a9c53cde4191a1d6b513e0803bd375d83031ce
author: Kit · 8mo ago · 2026-02-16 11:14 UTC
parent: 53e8e1e
signature: SSH UnverifiedSHA256:H91DFuEG4jpk5edzLA4aUKkpv4zv9Q339ipRmkph6Tk The key is unknown

1 file · +4 -3

M src/lib/components/chat-room.svelte +4 -3


@@ -374,8 +374,8 @@
374	374		}
375	375		});
376	376
377		-	// Auto-scroll to bottom when new messages arrive (Svelte 5 recommended pattern)
378		-	$effect.pre(() => {
	377	+	// Auto-scroll to bottom when new messages arrive
	378	+	$effect(() => {
379	379		if (!browser \|\| !chatArea) return;
380	380
381	381		// Reference visibleMessages so effect re-runs when messages change

@@ -391,7 +391,8 @@
391	391		// Scroll to bottom on initial load OR when messages update (if user was near bottom)
392	392		if (!hasInitialScrolled \|\| (hasMessageUpdate && isNearBottom)) {
393	393		hasInitialScrolled = true;
394		-	tick().then(() => {
	394	+	// Use rAF to ensure browser has completed layout after DOM update
	395	+	requestAnimationFrame(() => {
395	396		if (chatArea) {
396	397		chatArea.scrollTo(0, chatArea.scrollHeight);
397	398		}

 		}
 	});
-	// Auto-scroll to bottom when new messages arrive (Svelte 5 recommended pattern)
+	// Auto-scroll to bottom when new messages arrive
-	$effect.pre(() => {
+	$effect(() => {
 		if (!browser || !chatArea) return;
 		// Reference visibleMessages so effect re-runs when messages change
 		// Scroll to bottom on initial load OR when messages update (if user was near bottom)
 		if (!hasInitialScrolled || (hasMessageUpdate && isNearBottom)) {
 			hasInitialScrolled = true;
-			tick().then(() => {
+			// Use rAF to ensure browser has completed layout after DOM update
+			requestAnimationFrame(() => {
 				if (chatArea) {
 					chatArea.scrollTo(0, chatArea.scrollHeight);
 				}