fix: TaskDetailSheet X close + overflow menu aligned in same row

src/renderer/components/tasks/TaskDetailSheet.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { MoreHorizontal, Pencil, Trash2, ChevronRight, Plus } from 'lucide-react';
-import { Sheet, SheetContent } from '@/components/ui/sheet';
+import { MoreHorizontal, Pencil, Trash2, ChevronRight, Plus, X } from 'lucide-react';
+import { Sheet, SheetContent, SheetClose } from '@/components/ui/sheet';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -58,34 +58,41 @@ export function TaskDetailSheet({ task, open, onOpenChange, onEdit, onDelete }:
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side="right"
+        showCloseButton={false}
         className="w-[480px] !max-w-[480px] flex flex-col p-0 gap-0 bg-card/85 backdrop-blur-xl border-border/50"
       >
         {/* Sticky header */}
         <div className="px-6 pt-6 pb-4 border-b border-border/40 shrink-0">
-          {/* pr-8 reserves room for the SheetContent built-in close X (top-4 right-4) */}
-          <div className="flex items-start justify-between gap-2 pr-8">
+          <div className="flex items-center justify-between gap-2">
             <div className="text-xs text-muted-foreground flex items-center gap-1 min-w-0">
               {task.clientName && <span className="truncate">{task.clientName}</span>}
               {task.clientName && task.projectName && <ChevronRight className="h-3 w-3 shrink-0" />}
               {task.projectName && <span className="text-foreground font-medium truncate">{task.projectName}</span>}
             </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-7 w-7 -mr-1">
-                  <MoreHorizontal className="h-4 w-4" />
+            <div className="flex items-center gap-1 shrink-0">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onSelect={() => onEdit(task)}>
+                    <Pencil className="h-4 w-4 mr-2" />
+                    {t('common.edit')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={() => onDelete(task.id)} className="text-destructive focus:text-destructive">
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    {t('common.delete')}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <SheetClose asChild>
+                <Button variant="ghost" size="icon" className="h-7 w-7">
+                  <X className="h-4 w-4" />
                 </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem onSelect={() => onEdit(task)}>
-                  <Pencil className="h-4 w-4 mr-2" />
-                  {t('common.edit')}
-                </DropdownMenuItem>
-                <DropdownMenuItem onSelect={() => onDelete(task.id)} className="text-destructive focus:text-destructive">
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  {t('common.delete')}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+              </SheetClose>
+            </div>
           </div>
           <div className="text-lg font-semibold leading-tight mt-1">{task.title}</div>
           <div className="flex items-center gap-2 mt-2">