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

This commit is contained in:
Colin Dawson 2026-02-16 21:30:08 +00:00
parent b1d2ee70c9
commit b4b32dc95e
2 changed files with 42 additions and 17 deletions

View File

@ -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;
}
}

View File

@ -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>
);
};