From 3a6d5f5bbab5d6472c339bcaee62fae394f0707e Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 21 May 2025 15:56:01 +0100
Subject: [PATCH] fix: update textarea to fit content height and set a max
 height (#17946)

---
 .../DynamicParameter/DynamicParameter.tsx     | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 94fa3bc383..fc74a3a46a 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -239,18 +239,30 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 
 		prevDebouncedValueRef.current = debouncedLocalValue;
 	}, [debouncedLocalValue, onChangeEvent]);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+	const resizeTextarea = useEffectEvent(() => {
+		if (textareaRef.current) {
+			const textarea = textareaRef.current;
+			textarea.style.height = `${textarea.scrollHeight}px`;
+		}
+	});
+
+	useEffect(() => {
+		resizeTextarea();
+	}, [resizeTextarea]);
 
 	switch (parameter.form_type) {
-		case "textarea":
+		case "textarea": {
 			return (
 				<Textarea
+					ref={textareaRef}
 					id={id}
-					className="max-w-2xl"
+					className="overflow-y-auto max-h-[500px]"
 					value={localValue}
 					onChange={(e) => {
 						const target = e.currentTarget;
 						target.style.height = "auto";
-						target.style.maxHeight = "700px";
 						target.style.height = `${target.scrollHeight}px`;
 
 						setLocalValue(e.target.value);
@@ -260,6 +272,7 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 					required={parameter.required}
 				/>
 			);
+		}
 
 		case "input": {
 			const inputType = parameter.type === "number" ? "number" : "text";