fix: update textarea to fit content height and set a max height (#17946)

jaaydenh · web-flow · commit 3a6d5f5bbab5 · 2025-05-21T10:56:01.000-04:00
diff --git 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";
