From 15b5f97f89fe83eddc2f826dd7922c25d467f878 Mon Sep 17 00:00:00 2001
From: Algorithm5838 <108630393+Algorithm5838@users.noreply.github.com>
Date: Mon, 16 Feb 2026 10:33:51 +0300
Subject: [PATCH] fix: prevent scroll jump when editing large messages (#21402)

Save and restore scroll positions around textarea auto-resize to avoid
layout shifts. Use preventScroll on focus.
---
 .../chat/Messages/ResponseMessage.svelte         | 10 ++++++++++
 .../components/chat/Messages/UserMessage.svelte  | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 47c1b5142..ae55ca349 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -365,8 +365,13 @@
 
 		await tick();
 
+		const messagesContainer = document.getElementById('messages-container');
+		const savedScrollTop = messagesContainer?.scrollTop;
+
 		editTextAreaElement.style.height = '';
 		editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
+
+		if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
 	};
 
 	const editMessageConfirmHandler = async () => {
@@ -697,8 +702,13 @@
 									class=" bg-transparent outline-hidden w-full resize-none"
 									bind:value={editedContent}
 									on:input={(e) => {
+										const messagesContainer = document.getElementById('messages-container');
+										const savedScrollTop = messagesContainer?.scrollTop;
+
 										e.target.style.height = '';
 										e.target.style.height = `${e.target.scrollHeight}px`;
+
+										if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
 									}}
 									on:keydown={(e) => {
 										if (e.key === 'Escape') {
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 417c6737f..f21d91bfb 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -50,6 +50,7 @@
 	let editedFiles = [];
 
 	let messageEditTextAreaElement: HTMLTextAreaElement;
+	let editScrollContainer: HTMLDivElement;
 
 	let message = JSON.parse(JSON.stringify(history.messages[messageId]));
 	$: if (history.messages) {
@@ -73,10 +74,14 @@
 		await tick();
 
 		if (messageEditTextAreaElement) {
+			const messagesContainer = document.getElementById('messages-container');
+			const savedScrollTop = messagesContainer?.scrollTop;
+
 			messageEditTextAreaElement.style.height = '';
 			messageEditTextAreaElement.style.height = `${messageEditTextAreaElement.scrollHeight}px`;
 
-			messageEditTextAreaElement?.focus();
+			if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
+			messageEditTextAreaElement?.focus({ preventScroll: true });
 		}
 	};
 
@@ -283,15 +288,22 @@
 						</div>
 					{/if}
 
-					<div class="max-h-96 overflow-auto">
+					<div class="max-h-96 overflow-auto" bind:this={editScrollContainer}>
 						<textarea
 							id="message-edit-{message.id}"
 							bind:this={messageEditTextAreaElement}
 							class=" bg-transparent outline-hidden w-full resize-none"
 							bind:value={editedContent}
 							on:input={(e) => {
+								const messagesContainer = document.getElementById('messages-container');
+								const savedScrollTop = messagesContainer?.scrollTop;
+								const savedInnerScroll = editScrollContainer?.scrollTop;
+
 								e.target.style.height = '';
 								e.target.style.height = `${e.target.scrollHeight}px`;
+
+								if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
+								if (editScrollContainer) editScrollContainer.scrollTop = savedInnerScroll;
 							}}
 							on:keydown={(e) => {
 								if (e.key === 'Escape') {