The AddTaskButton is now stuck in place on the screen, so the task list will scroll instead.
This commit is contained in:
parent
b1d2ee70c9
commit
b4b32dc95e
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user