Independent scrolling is now working for the TasksTab

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%;
+  }
 }

src/Sass/_frame.scss

@@ -42,4 +42,8 @@
   width: 100%;
   overflow: auto;
   padding: $frameWorkAreaPadding;
+
+  &.no-scroll {
+    overflow: hidden;
+  }
 }

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 {

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>
 

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
+        <div>
-          tasksMetadata={tasksMetadata}
+          <TaskEditor
-          task={selectedTask}
+            tasksMetadata={tasksMetadata}
-          tasks={tasks}
+            task={selectedTask}
-          onChange={(updatedTask) => {
+            tasks={tasks}
-            const newTasks = tasks.map((t) =>
+            onChange={(updatedTask) => {
-              t.config.guid === updatedTask.config.guid ? updatedTask : t,
+              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
+              // Use the updated object from the array, not the raw updatedTask
-            const updatedFromArray = newTasks.find(
+              const updatedFromArray = newTasks.find(
-              (t) => t.config.guid === updatedTask.config.guid,
+                (t) => t.config.guid === updatedTask.config.guid,
-            );
+              );
 
-            setSelectedTask(updatedFromArray!);
+              setSelectedTask(updatedFromArray!);
-          }}
+            }}
-          onValidate={onValidate}
+            onValidate={onValidate}
-        />
+          />
+        </div>
       )}
     </div>
   );