From b4b32dc95e3af5d1cb3ca34ccd9ffac382b51474 Mon Sep 17 00:00:00 2001
From: Colin Dawson <me@cjdawson.com>
Date: Mon, 16 Feb 2026 21:30:08 +0000
Subject: [PATCH] The AddTaskButton is now stuck in place on the screen, so the
 task list will scroll instead.

---
 src/Sass/_domains.scss                        | 21 ++++++++++
 .../workflowTemplates/components/TaskList.tsx | 38 ++++++++++---------
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/Sass/_domains.scss b/src/Sass/_domains.scss
index 22ca810..8958c9d 100644
--- a/src/Sass/_domains.scss
+++ b/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;
   }
 }
diff --git a/src/modules/manager/workflowTemplates/components/TaskList.tsx b/src/modules/manager/workflowTemplates/components/TaskList.tsx
index 7acdae5..218a5d9 100644
--- a/src/modules/manager/workflowTemplates/components/TaskList.tsx
+++ b/src/modules/manager/workflowTemplates/components/TaskList.tsx
@@ -57,25 +57,29 @@ const TaskList: React.FC<TaskListProps> = ({
   const sortedTasks = sortTasksTopologically(tasks);
 
   return (
-    <div>
-      <AddTaskButton tasksMetadata={tasksMetadata} onAdd={handleAddTask} />
+    <div className="task-list-container">
+      <div className="task-list-header">
+        <AddTaskButton tasksMetadata={tasksMetadata} onAdd={handleAddTask} />
+      </div>
 
-      <SelectableList
-        items={sortedTasks}
-        selectedValue={selectedTask}
-        renderLabel={(x) => (
-          <>
-            {x.config.name as string}
+      <div className="task-list-content">
+        <SelectableList
+          items={sortedTasks}
+          selectedValue={selectedTask}
+          renderLabel={(x) => (
+            <>
+              {x.config.name as string}
 
-            {validTasksList[x.config.guid as string] === false && (
-              <span className="error-icon">
-                <FontAwesomeIcon icon={faExclamationCircle} />
-              </span>
-            )}
-          </>
-        )}
-        onSelect={(item) => onSelectTask(item)}
-      />
+              {validTasksList[x.config.guid as string] === false && (
+                <span className="error-icon">
+                  <FontAwesomeIcon icon={faExclamationCircle} />
+                </span>
+              )}
+            </>
+          )}
+          onSelect={(item) => onSelectTask(item)}
+        />
+      </div>
     </div>
   );
 };