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 { > div {
overflow-y: auto; overflow-y: auto;
height: 100%; 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); const sortedTasks = sortTasksTopologically(tasks);
return ( return (
<div> <div className="task-list-container">
<AddTaskButton tasksMetadata={tasksMetadata} onAdd={handleAddTask} /> <div className="task-list-header">
<AddTaskButton tasksMetadata={tasksMetadata} onAdd={handleAddTask} />
</div>
<SelectableList <div className="task-list-content">
items={sortedTasks} <SelectableList
selectedValue={selectedTask} items={sortedTasks}
renderLabel={(x) => ( selectedValue={selectedTask}
<> renderLabel={(x) => (
{x.config.name as string} <>
{x.config.name as string}
{validTasksList[x.config.guid as string] === false && ( {validTasksList[x.config.guid as string] === false && (
<span className="error-icon"> <span className="error-icon">
<FontAwesomeIcon icon={faExclamationCircle} /> <FontAwesomeIcon icon={faExclamationCircle} />
</span> </span>
)} )}
</> </>
)} )}
onSelect={(item) => onSelectTask(item)} onSelect={(item) => onSelectTask(item)}
/> />
</div>
</div> </div>
); );
}; };