fix: project picker dropdown stays visible and above other tasks

Add picker-open class when project picker is shown to keep task-actions
visible even when mouse leaves the task hover area. Elevate z-index on
picker-open tasks so the dropdown isn't obscured by adjacent tasks.

v1.57.15
This commit is contained in:
mARTin 2026-03-23 10:28:17 +01:00
parent 02ae5a46f8
commit 3da2acadf1
4 changed files with 16 additions and 3 deletions

View File

@ -1,6 +1,6 @@
{
"name": "my-weekly-todo-list",
"version": "1.57.14",
"version": "1.57.15",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js",
"scripts": {

View File

@ -1037,6 +1037,19 @@ h3 {
border-color: #404040;
}
/* Keep task-actions visible when a picker/dropdown is open */
.time-slot-task.picker-open > .task-actions,
.weekly-task-item.picker-open > .task-actions {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
/* Ensure picker-open task is above other tasks */
.time-slot-task.picker-open {
z-index: 50 !important;
}
.task-action-btn {
background: none;
border: none;

View File

@ -191,7 +191,7 @@ export function GridTaskBlock({
return (
<div
ref={blockRef}
className={`time-slot-task ${task.completed && !showTaskCheckboxes ? "completed" : ""} ${draggedTask?.id === task.id ? "dragging" : ""} ${touchActive ? "touch-active" : ""}`}
className={`time-slot-task ${task.completed && !showTaskCheckboxes ? "completed" : ""} ${draggedTask?.id === task.id ? "dragging" : ""} ${touchActive ? "touch-active" : ""} ${showProjectPicker ? "picker-open" : ""}`}
style={{
position: "absolute",
top: `${topOffset}px`,

View File

@ -9596,7 +9596,7 @@ function TaskItem({
return (
<li
ref={taskItemRef}
className={`weekly-task-item ${variant} ${task.completed ? "completed" : ""} ${task.completed && showTaskCheckboxes ? "completed-with-checkbox" : ""} ${isSomeday ? "relative mx-2 w-full" : ""} ${touchActive ? "touch-active" : ""} ${swipeX !== 0 ? "task-swipe-container" : ""}`}
className={`weekly-task-item ${variant} ${task.completed ? "completed" : ""} ${task.completed && showTaskCheckboxes ? "completed-with-checkbox" : ""} ${isSomeday ? "relative mx-2 w-full" : ""} ${touchActive ? "touch-active" : ""} ${showProjectPicker ? "picker-open" : ""} ${swipeX !== 0 ? "task-swipe-container" : ""}`}
style={(() => {
const stageColor = task.kanbanStage ? kanbanStages.find(s => s.id === task.kanbanStage)?.color : null;
if (stageColor) return { borderLeft: `4px solid ${stageColor}`, paddingLeft: "6px" };