change status in modal

src/pages/taskmanager/components/task-detail/TaskDetailHeader.tsx

@@ -29,32 +29,39 @@ const TaskDetailHeader: FC<Props> = ({
   return (
     <div className="flex items-center justify-between border-b border-border pb-4">
       <Popover className="relative">
-        <PopoverButton
-          disabled={isChangingPhase}
-          className="flex items-center gap-1.5 bg-white/60 rounded-full px-4 py-2 text-xs font-medium cursor-pointer disabled:opacity-50 outline-none"
-        >
-          <span>{selectedColumn?.title ?? ""}</span>
-          <ArrowDown2 size={14} color="#292D32" />
-        </PopoverButton>
-
-        <PopoverPanel
-          anchor="bottom start"
-          className="z-20 mt-1 min-w-[160px] rounded-xl bg-white shadow-md border border-border py-1 text-sm"
-        >
-          {columns.map((column) => (
-            <button
-              key={column.id}
-              type="button"
-              onClick={() => onPhaseChange(column.id)}
-              className={clx(
-                "w-full px-4 py-2.5 text-right transition-colors hover:bg-black/5",
-                column.id === selectedPhaseId && "font-bold bg-black/5",
-              )}
+        {({ close }) => (
+          <>
+            <PopoverButton
+              disabled={isChangingPhase}
+              className="flex items-center gap-1.5 bg-white/60 rounded-full px-4 py-2 text-xs font-medium cursor-pointer disabled:opacity-50 outline-none"
             >
-              {column.title}
-            </button>
-          ))}
-        </PopoverPanel>
+              <span>{selectedColumn?.title ?? ""}</span>
+              <ArrowDown2 size={14} color="#292D32" />
+            </PopoverButton>
+
+            <PopoverPanel
+              anchor="bottom start"
+              className="z-[80] mt-1 min-w-[160px] rounded-xl bg-white shadow-md border border-border py-1 text-sm"
+            >
+              {columns.map((column) => (
+                <button
+                  key={column.id}
+                  type="button"
+                  onClick={() => {
+                    onPhaseChange(column.id);
+                    close();
+                  }}
+                  className={clx(
+                    "w-full px-4 py-2.5 text-right transition-colors hover:bg-black/5",
+                    column.id === selectedPhaseId && "font-bold bg-black/5",
+                  )}
+                >
+                  {column.title}
+                </button>
+              ))}
+            </PopoverPanel>
+          </>
+        )}
       </Popover>
 
       <div className="flex items-center gap-2">

src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

@@ -66,7 +66,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
 
   if (!task) return null;
 
-  const selectedPhaseId = taskDetail?.taskPhaseId ?? task.columnId;
+  const selectedPhaseId = task.columnId || taskDetail?.taskPhaseId || "";
 
   const handleTabChange = (tab: TaskDetailTab) => {
     setActiveTab((prev) => (prev === tab ? null : tab));