marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix status dropdown z-index behind subtasks in project view (#866)

Browse source
This commit is contained in:
Chris 2026-02-26 19:53:59 +02:00 • committed by GitHub
parent 6e3b1b4099
commit 0146b87a4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/components/Task/TaskHeader.tsx
View file

@ -34,6 +34,7 @@ interface TaskHeaderProps {
onEdit?: (e: React.MouseEvent) => void;
onDelete?: (e: React.MouseEvent) => void;
isUpcomingView?: boolean;
onMenuOpenChange?: (isOpen: boolean) => void;
}
const TaskHeader: React.FC<TaskHeaderProps> = ({
@ -51,6 +52,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
onEdit: _onEdit,
onDelete: _onDelete,
isUpcomingView = false,
onMenuOpenChange,
}) => {
const { t } = useTranslation();
void _onToggleToday;
@ -454,6 +456,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
onTaskUpdate={onTaskUpdate}
showMobileVariant={false}
className=""
onMenuOpenChange={onMenuOpenChange}
/>
</div>
)}
@ -632,6 +635,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
onTaskUpdate={onTaskUpdate}
hoverRevealQuickActions={false}
showMobileVariant={false}
onMenuOpenChange={onMenuOpenChange}
/>
</div>
)}

10
frontend/components/Task/TaskItem.tsx
View file

@ -67,7 +67,7 @@ const SubtasksDisplay: React.FC<SubtasksDisplayProps> = ({
}
return (
<div className="mt-1 space-y-1">
<div className="mt-1 space-y-1 relative z-0">
{subtasks.map((subtask) => {
const borderClass = isTaskCompleted(subtask.status)
? 'border-l-4 border-l-green-500'
@ -176,6 +176,9 @@ const TaskItem: React.FC<TaskItemProps> = ({
const { showErrorToast } = useToast();
const [isAnimatingOut, setIsAnimatingOut] = useState(false);
// Status menu state
const [isStatusMenuOpen, setIsStatusMenuOpen] = useState(false);
// Subtasks state
const [subtasks, setSubtasks] = useState<Task[]>([]);
const [loadingSubtasks, setLoadingSubtasks] = useState(false);
@ -373,7 +376,7 @@ const TaskItem: React.FC<TaskItemProps> = ({
: getPriorityBorderClassName(task.priority);
return (
<>
<div className={`relative ${isStatusMenuOpen ? 'z-[10001]' : ''}`}>
<div
className={`rounded-lg shadow-sm bg-white dark:bg-gray-900 relative overflow-visible transition-colors duration-200 ease-in-out hover:ring-1 hover:ring-gray-200 dark:hover:ring-gray-700 ${priorityBorderClass} ${
isInProgress
@ -400,6 +403,7 @@ const TaskItem: React.FC<TaskItemProps> = ({
onEdit={handleEdit}
onDelete={handleDeleteClick}
isUpcomingView={isUpcomingView}
onMenuOpenChange={setIsStatusMenuOpen}
/>
{/* Progress bar at bottom of parent task */}
@ -450,7 +454,7 @@ const TaskItem: React.FC<TaskItemProps> = ({
onCancel={() => setIsConfirmDialogOpen(false)}
/>
)}
</>
</div>
);
};

6
frontend/components/Task/TaskStatusControl.tsx
View file

@ -32,6 +32,7 @@ interface TaskStatusControlProps {
className?: string;
variant?: 'pill' | 'square';
showQuickActions?: boolean;
onMenuOpenChange?: (isOpen: boolean) => void;
}
const quickStartStatuses = new Set([
@ -50,10 +51,15 @@ const TaskStatusControl: React.FC<TaskStatusControlProps> = ({
className = '',
variant = 'square',
showQuickActions = true,
onMenuOpenChange,
}) => {
const { t } = useTranslation();
const [completionMenuOpen, setCompletionMenuOpen] =
useState<CompletionMenuTarget | null>(null);
useEffect(() => {
onMenuOpenChange?.(completionMenuOpen !== null);
}, [completionMenuOpen, onMenuOpenChange]);
const [isCompletingTask, setIsCompletingTask] = useState(false);
const desktopCompletionMenuRef = useRef<HTMLDivElement>(null);
const mobileCompletionMenuRef = useRef<HTMLDivElement>(null);