From f6cbffe19089773634e6711ab45853d4f2ef18ca Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Wed, 9 Oct 2024 08:01:24 -0700
Subject: [PATCH] Add a max height for task form code editor fields (#941)

---
 skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx | 3 +++
 skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx     | 3 +++
 .../src/routes/workflows/components/CodeEditor.tsx             | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
index d2bd301d..c0da4607 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
@@ -295,6 +295,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                                   language="json"
                                   fontSize={12}
                                   minHeight="96px"
+                                  maxHeight="500px"
                                   value={
                                     field.value === null ? "" : field.value
                                   }
@@ -389,6 +390,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                               language="json"
                               fontSize={12}
                               minHeight="96px"
+                              maxHeight="500px"
                               value={field.value === null ? "" : field.value}
                             />
                           </FormControl>
@@ -509,6 +511,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                               language="json"
                               fontSize={12}
                               minHeight="96px"
+                              maxHeight="500px"
                               value={field.value === null ? "" : field.value}
                             />
                           </FormControl>
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
index 2becdbf0..e8273734 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
@@ -464,6 +464,7 @@ function SavedTaskForm({ initialValues }: Props) {
                                   language="json"
                                   fontSize={12}
                                   minHeight="96px"
+                                  maxHeight="500px"
                                   value={
                                     field.value === null ? "" : field.value
                                   }
@@ -558,6 +559,7 @@ function SavedTaskForm({ initialValues }: Props) {
                               language="json"
                               fontSize={14}
                               minHeight="96px"
+                              maxHeight="500px"
                               value={
                                 field.value === null ||
                                 typeof field.value === "undefined"
@@ -683,6 +685,7 @@ function SavedTaskForm({ initialValues }: Props) {
                               language="json"
                               fontSize={12}
                               minHeight="96px"
+                              maxHeight="500px"
                               value={field.value === null ? "" : field.value}
                             />
                           </FormControl>
diff --git a/skyvern-frontend/src/routes/workflows/components/CodeEditor.tsx b/skyvern-frontend/src/routes/workflows/components/CodeEditor.tsx
index 275ac2e2..1b4ffe2a 100644
--- a/skyvern-frontend/src/routes/workflows/components/CodeEditor.tsx
+++ b/skyvern-frontend/src/routes/workflows/components/CodeEditor.tsx
@@ -10,6 +10,7 @@ type Props = {
   language: "python" | "json";
   disabled?: boolean;
   minHeight?: string;
+  maxHeight?: string;
   className?: string;
   fontSize?: number;
 };
@@ -18,6 +19,7 @@ function CodeEditor({
   value,
   onChange,
   minHeight,
+  maxHeight,
   language,
   className,
   fontSize = 8,
@@ -33,6 +35,7 @@ function CodeEditor({
       extensions={extensions}
       theme={tokyoNightStorm}
       minHeight={minHeight}
+      maxHeight={maxHeight}
       className={cn("cursor-auto", className)}
       style={{
         fontSize: fontSize,