Improve snapScrollToBottom with ResizeObserver and smoother scroll

Refactors the snapScrollToBottom action to use ResizeObserver for more reliable scroll-to-bottom behavior on content changes, and enhances scroll settling by waiting for animation frames to handle late layout shifts. Also improves detachment/reattachment logic and ensures cleanup of observers.

src/lib/actions/snapScrollToBottom.ts

@@ -3,6 +3,13 @@ import { tick } from "svelte";
 
 const detachedOffset = 10;
 
+const waitForAnimationFrame = () =>
+	typeof requestAnimationFrame === "function"
+		? new Promise<void>((resolve) => {
+				requestAnimationFrame(() => resolve());
+			})
+		: Promise.resolve();
+
 /**
  * @param node element to snap scroll to bottom
  * @param dependency pass in a dependency to update scroll on changes.
@@ -10,6 +17,32 @@ const detachedOffset = 10;
 export const snapScrollToBottom = (node: HTMLElement, dependency: unknown) => {
 	let prevScrollValue = node.scrollTop;
 	let isDetached = false;
+	let resizeObserver: ResizeObserver | undefined;
+
+	const scrollToBottom = () => {
+		node.scrollTo({ top: node.scrollHeight });
+	};
+
+	const distanceFromBottom = () => node.scrollHeight - node.scrollTop - node.clientHeight;
+
+	async function updateScroll(_options: { force?: boolean } = {}) {
+		const options = { force: false, ..._options };
+		const { force } = options;
+
+		if (!force && isDetached && !navigating.to) return;
+
+		// wait for the next tick to ensure that the DOM is updated
+		await tick();
+		scrollToBottom();
+
+		// ensure we settle after late layout shifts (e.g. markdown/image renders)
+		if (typeof requestAnimationFrame === "function") {
+			await waitForAnimationFrame();
+			scrollToBottom();
+			await waitForAnimationFrame();
+			scrollToBottom();
+		}
+	}
 
 	const handleScroll = () => {
 		// if user scrolled up, we detach
@@ -17,37 +50,38 @@ export const snapScrollToBottom = (node: HTMLElement, dependency: unknown) => {
 			isDetached = true;
 		}
 
-		// if user scrolled back to within 10px of bottom, we reattach
-		if (node.scrollTop - (node.scrollHeight - node.clientHeight) >= -detachedOffset) {
+		const atBottom = distanceFromBottom() <= detachedOffset;
+		if (atBottom) {
+			const wasDetached = isDetached;
 			isDetached = false;
+			if (wasDetached) {
+				void updateScroll({ force: true });
+			}
 		}
 
 		prevScrollValue = node.scrollTop;
 	};
 
-	const updateScroll = async (_options: { force?: boolean } = {}) => {
-		const defaultOptions = { force: false };
-		const options = { ...defaultOptions, ..._options };
-		const { force } = options;
-
-		if (!force && isDetached && !navigating.to) return;
-
-		// wait for next tick to ensure that the DOM is updated
-		await tick();
-
-		node.scrollTo({ top: node.scrollHeight });
-	};
-
 	node.addEventListener("scroll", handleScroll);
 
+	if (typeof ResizeObserver !== "undefined") {
+		const target = node.firstElementChild ?? node;
+		resizeObserver = new ResizeObserver(() => {
+			if (isDetached && !navigating.to) return;
+			scrollToBottom();
+		});
+		resizeObserver.observe(target);
+	}
+
 	if (dependency) {
-		updateScroll({ force: true });
+		void updateScroll({ force: true });
 	}
 
 	return {
 		update: updateScroll,
 		destroy: () => {
 			node.removeEventListener("scroll", handleScroll);
+			resizeObserver?.disconnect();
 		},
 	};
 };