From d4d057b6dd6a9df2a44479a68d737154600e6162 Mon Sep 17 00:00:00 2001
From: Piero Evangelista <pierevco@gmail.com>
Date: Sun, 26 Jul 2026 18:03:06 -0400
Subject: [PATCH] ui: fix system message edit box not expanding to fit content
 (#26006)

The in-conversation system-message edit textarea had a fixed min-height and no auto-resize, so long messages were crammed to 2 lines. Reused existing autoResizeTextarea helper on input and when the editor opens, and added max-height to cap growth.
---
 .../ChatMessageSystem/ChatMessageSystem.svelte      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
index 36798e228..24b3be4c5 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
@@ -7,7 +7,7 @@
 	import { getMessageEditContext } from '$lib/contexts';
 	import { KeyboardKey, MessageRole } from '$lib/enums';
 	import { config } from '$lib/stores/settings.svelte';
-	import { isIMEComposing } from '$lib/utils';
+	import { autoResizeTextarea, isIMEComposing } from '$lib/utils';
 
 	interface Props {
 		class?: string;
@@ -91,6 +91,11 @@
 			resizeObserver.disconnect();
 		};
 	});
+	$effect(() => {
+		if (editCtx.isEditing && textareaElement) {
+			autoResizeTextarea(textareaElement);
+		}
+	});
 
 	function toggleExpand() {
 		isExpanded = !isExpanded;
@@ -105,11 +110,15 @@
 	{#if editCtx.isEditing}
 		<div class="w-full max-w-[80%]">
 			<textarea
+				style="max-height: var(--max-message-height);"
 				bind:this={textareaElement}
 				value={editCtx.editedContent}
 				class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
 				onkeydown={handleEditKeydown}
-				oninput={(e) => editCtx.setContent(e.currentTarget.value)}
+				oninput={(e) => {
+					autoResizeTextarea(e.currentTarget);
+					editCtx.setContent(e.currentTarget.value);
+				}}
 				placeholder="Edit system message..."
 			></textarea>