From 2db0f58dcbb97aecc3bb2cda733a8e5b7e46db0d Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 19 Oct 2024 18:42:26 -0700
Subject: [PATCH] refac: user message edit

---
 .../chat/Messages/UserMessage.svelte          | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 2c9859e8d..7c3a6feac 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -142,28 +142,30 @@
 
 			{#if edit === true}
 				<div class=" w-full bg-gray-50 dark:bg-gray-800 rounded-3xl px-5 py-3 mb-2">
-					<textarea
-						id="message-edit-{message.id}"
-						bind:this={messageEditTextAreaElement}
-						class=" bg-transparent outline-none w-full resize-none"
-						bind:value={editedContent}
-						on:input={(e) => {
-							e.target.style.height = '';
-							e.target.style.height = `${e.target.scrollHeight}px`;
-						}}
-						on:keydown={(e) => {
-							if (e.key === 'Escape') {
-								document.getElementById('close-edit-message-button')?.click();
-							}
+					<div class="max-h-[25dvh] overflow-auto">
+						<textarea
+							id="message-edit-{message.id}"
+							bind:this={messageEditTextAreaElement}
+							class=" bg-transparent outline-none w-full resize-none"
+							bind:value={editedContent}
+							on:input={(e) => {
+								e.target.style.height = '';
+								e.target.style.height = `${e.target.scrollHeight}px`;
+							}}
+							on:keydown={(e) => {
+								if (e.key === 'Escape') {
+									document.getElementById('close-edit-message-button')?.click();
+								}
 
-							const isCmdOrCtrlPressed = e.metaKey || e.ctrlKey;
-							const isEnterPressed = e.key === 'Enter';
+								const isCmdOrCtrlPressed = e.metaKey || e.ctrlKey;
+								const isEnterPressed = e.key === 'Enter';
 
-							if (isCmdOrCtrlPressed && isEnterPressed) {
-								document.getElementById('confirm-edit-message-button')?.click();
-							}
-						}}
-					/>
+								if (isCmdOrCtrlPressed && isEnterPressed) {
+									document.getElementById('confirm-edit-message-button')?.click();
+								}
+							}}
+						/>
+					</div>
 
 					<div class=" mt-2 mb-1 flex justify-between text-sm font-medium">
 						<div>