refac

src/lib/components/chat/Messages.svelte

@@ -144,15 +144,18 @@
 		})();
 	}
 
-	const scrollToBottom = () => {
+	export const scrollToBottom = () => {
 		const element = getMessagesContainer();
 		if (element) {
 			element.scrollTop = element.scrollHeight;
 
-			// Follow-up scroll to account for content-visibility: auto re-layouts
+			// Re-scroll across two frames as content-visibility resolves message heights.
 			requestAnimationFrame(() => {
 				if (element) {
 					element.scrollTop = element.scrollHeight;
+					requestAnimationFrame(() => {
+						element.scrollTop = element.scrollHeight;
+					});
 				}
 			});
 		}

src/lib/components/chat/Messages/UserMessage.svelte

@@ -142,7 +142,7 @@
 />
 
 <div
-	class=" flex w-full user-message group"
+	class="flex w-full user-message group {!isOwn && !message?.meta?.internal ? 'mb-2' : ''}"
 	dir={$settings.chatDirection}
 	id="message-{message.id}"
 	style="scroll-margin-top: 3rem;"

src/routes/s/[id]/+page.svelte

@@ -24,7 +24,7 @@
 
 	let autoScroll = true;
 	let processing = '';
-	let messagesContainerElement: HTMLDivElement;
+	let messagesComponent;
 
 	// let chatId = $page.params.id;
 	let showModelSelector = false;
@@ -50,8 +50,9 @@
 	$: if ($page.params.id) {
 		(async () => {
 			if (await loadSharedChat()) {
-				await tick();
 				loaded = true;
+				await tick();
+				messagesComponent?.scrollToBottom();
 			} else if (localStorage.token) {
 				await goto('/');
 			} else {
@@ -214,6 +215,7 @@
 				<div class=" h-full w-full flex flex-col py-2" role="main">
 					<div class="w-full">
 						<Messages
+							bind:this={messagesComponent}
 							className="h-full flex pb-8"
 							{user}
 							chatId={$chatId}