From b1d2ee70c9cc097ac3e914c2ad545e643703198b Mon Sep 17 00:00:00 2001
From: Colin Dawson <me@cjdawson.com>
Date: Mon, 16 Feb 2026 21:24:31 +0000
Subject: [PATCH] Independent scrolling is now working for the TasksTab

---
 src/Sass/_domains.scss                        | 31 +++++++++++++++
 src/Sass/_frame.scss                          |  4 ++
 src/Sass/horizionalTabs.scss                  | 10 +++++
 .../WorkflowTemplateDetails.tsx               |  2 +-
 .../workflowTemplates/components/TasksTab.tsx | 38 ++++++++++---------
 5 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/src/Sass/_domains.scss b/src/Sass/_domains.scss
index 08c3111..22ca810 100644
--- a/src/Sass/_domains.scss
+++ b/src/Sass/_domains.scss
@@ -1,5 +1,30 @@
 @import "./_esuiteVariables.scss";
 
+.full-height-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  > form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    > h1,
+    > div:not(.horizionalTabs),
+    > * {
+      flex-shrink: 0;
+    }
+
+    > .horizionalTabs {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+}
+
 .two-column-grid-1-1 {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -10,4 +35,10 @@
   display: grid;
   grid-template-columns: fit-content(50%) auto;
   grid-gap: $gridGap;
+  height: 100%;
+
+  > div {
+    overflow-y: auto;
+    height: 100%;
+  }
 }
diff --git a/src/Sass/_frame.scss b/src/Sass/_frame.scss
index c1f0c8b..d7550c0 100644
--- a/src/Sass/_frame.scss
+++ b/src/Sass/_frame.scss
@@ -42,4 +42,8 @@
   width: 100%;
   overflow: auto;
   padding: $frameWorkAreaPadding;
+
+  &.no-scroll {
+    overflow: hidden;
+  }
 }
diff --git a/src/Sass/horizionalTabs.scss b/src/Sass/horizionalTabs.scss
index a0aede1..2819656 100644
--- a/src/Sass/horizionalTabs.scss
+++ b/src/Sass/horizionalTabs.scss
@@ -1,5 +1,9 @@
 .horizionalTabs {
+  display: flex;
+  flex-direction: column;
+
   .tab-list {
+    flex-shrink: 0;
     padding-left: 0;
     display: flex;
     align-items: bottom;
@@ -32,6 +36,12 @@
     border-width: 0 0 1px 0;
     background-color: inherit;
   }
+
+  > div:last-child {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+  }
 }
 
 .error-icon {
diff --git a/src/modules/manager/workflowTemplates/WorkflowTemplateDetails.tsx b/src/modules/manager/workflowTemplates/WorkflowTemplateDetails.tsx
index c942e13..5f2055c 100644
--- a/src/modules/manager/workflowTemplates/WorkflowTemplateDetails.tsx
+++ b/src/modules/manager/workflowTemplates/WorkflowTemplateDetails.tsx
@@ -207,7 +207,7 @@ const WorkflowTemplateDetails: React.FC<{ editMode: boolean }> = ({
 
   return (
     <Loading loaded={loaded}>
-      <div>
+      <div className="full-height-container">
         <form onSubmit={handleSubmit}>
           <h1>{heading}</h1>
 
diff --git a/src/modules/manager/workflowTemplates/components/TasksTab.tsx b/src/modules/manager/workflowTemplates/components/TasksTab.tsx
index 9f4c6d8..3ab06f8 100644
--- a/src/modules/manager/workflowTemplates/components/TasksTab.tsx
+++ b/src/modules/manager/workflowTemplates/components/TasksTab.tsx
@@ -67,7 +67,7 @@ const TasksTab: React.FC<TasksTabProps> = ({
 
   return (
     <div className="two-column-grid">
-      <div className="fit-content-width">
+      <div className="fit-content-width`">
         <TaskList
           tasks={tasks}
           validTasksList={taskValidation}
@@ -79,26 +79,28 @@ const TasksTab: React.FC<TasksTabProps> = ({
         />
       </div>
       {selectedTask && (
-        <TaskEditor
-          tasksMetadata={tasksMetadata}
-          task={selectedTask}
-          tasks={tasks}
-          onChange={(updatedTask) => {
-            const newTasks = tasks.map((t) =>
-              t.config.guid === updatedTask.config.guid ? updatedTask : t,
-            );
+        <div>
+          <TaskEditor
+            tasksMetadata={tasksMetadata}
+            task={selectedTask}
+            tasks={tasks}
+            onChange={(updatedTask) => {
+              const newTasks = tasks.map((t) =>
+                t.config.guid === updatedTask.config.guid ? updatedTask : t,
+              );
 
-            handleTasksChange(newTasks);
+              handleTasksChange(newTasks);
 
-            // Use the updated object from the array, not the raw updatedTask
-            const updatedFromArray = newTasks.find(
-              (t) => t.config.guid === updatedTask.config.guid,
-            );
+              // Use the updated object from the array, not the raw updatedTask
+              const updatedFromArray = newTasks.find(
+                (t) => t.config.guid === updatedTask.config.guid,
+              );
 
-            setSelectedTask(updatedFromArray!);
-          }}
-          onValidate={onValidate}
-        />
+              setSelectedTask(updatedFromArray!);
+            }}
+            onValidate={onValidate}
+          />
+        </div>
       )}
     </div>
   );