The AddTaskButton is now stuck in place on the screen, so the task list will scroll instead.

src/Sass/_domains.scss

@@ -40,5 +40,26 @@
   > div {
     overflow-y: auto;
     height: 100%;
+
+    &:has(.task-list-container) {
+      overflow: hidden;
+    }
+  }
+}
+
+.task-list-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .task-list-header {
+    flex-shrink: 0;
+    margin-bottom: $gridGap;
+  }
+
+  .task-list-content {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
   }
 }

src/modules/manager/workflowTemplates/components/TaskList.tsx

@@ -57,9 +57,12 @@ const TaskList: React.FC<TaskListProps> = ({
   const sortedTasks = sortTasksTopologically(tasks);
 
   return (
-    <div>
+    <div className="task-list-container">
+      <div className="task-list-header">
         <AddTaskButton tasksMetadata={tasksMetadata} onAdd={handleAddTask} />
+      </div>
 
+      <div className="task-list-content">
         <SelectableList
           items={sortedTasks}
           selectedValue={selectedTask}
@@ -77,6 +80,7 @@ const TaskList: React.FC<TaskListProps> = ({
           onSelect={(item) => onSelectTask(item)}
         />
       </div>
+    </div>
   );
 };