fix: move mobile delete button to header instead of drawer

- Moved delete button from MobileDrawer to MobileHeader (next to menu button)
- Delete button only shows when a session is selected
- Fixes modal z-index issue (dialog was showing behind drawer)
- Fixes layout scroll issue in drawer
- Simplified MobileDrawer back to original layout

autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx

@@ -56,7 +56,19 @@ export function CopilotPage() {
     >
       {!isMobile && <ChatSidebar />}
       <div className="relative flex h-full w-full flex-col overflow-hidden bg-[#f8f8f9] px-0">
-        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
+        {isMobile && (
+          <MobileHeader
+            onOpenDrawer={handleOpenDrawer}
+            showDelete={!!sessionId}
+            isDeleting={isDeleting}
+            onDelete={() => {
+              const session = sessions.find((s) => s.id === sessionId);
+              if (session) {
+                handleDeleteClick(session.id, session.title);
+              }
+            }}
+          />
+        )}
         <div className="flex-1 overflow-hidden">
           <ChatContainer
             messages={messages}
@@ -72,27 +84,26 @@ export function CopilotPage() {
         </div>
       </div>
       {isMobile && (
-        <>
-          <MobileDrawer
-            isOpen={isDrawerOpen}
-            sessions={sessions}
-            currentSessionId={sessionId}
-            isLoading={isLoadingSessions}
-            isDeleting={isDeleting}
-            onSelectSession={handleSelectSession}
-            onNewChat={handleNewChat}
-            onClose={handleCloseDrawer}
-            onOpenChange={handleDrawerOpenChange}
-            onDeleteSession={handleDeleteClick}
-          />
-          <DeleteConfirmDialog
-            entityType="chat"
-            entityName={sessionToDelete?.title || "Untitled chat"}
-            open={!!sessionToDelete}
-            onOpenChange={(open) => !open && handleCancelDelete()}
-            onDoDelete={handleConfirmDelete}
-          />
-        </>
+        <MobileDrawer
+          isOpen={isDrawerOpen}
+          sessions={sessions}
+          currentSessionId={sessionId}
+          isLoading={isLoadingSessions}
+          onSelectSession={handleSelectSession}
+          onNewChat={handleNewChat}
+          onClose={handleCloseDrawer}
+          onOpenChange={handleDrawerOpenChange}
+        />
+      )}
+      {/* Delete confirmation dialog - rendered at top level for proper z-index on mobile */}
+      {isMobile && (
+        <DeleteConfirmDialog
+          entityType="chat"
+          entityName={sessionToDelete?.title || "Untitled chat"}
+          open={!!sessionToDelete}
+          onOpenChange={(open) => !open && handleCancelDelete()}
+          onDoDelete={handleConfirmDelete}
+        />
       )}
     </SidebarProvider>
   );

autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { scrollbarStyles } from "@/components/styles/scrollbars";
 import { cn } from "@/lib/utils";
-import { PlusIcon, SpinnerGapIcon, TrashIcon, X } from "@phosphor-icons/react";
+import { PlusIcon, SpinnerGapIcon, X } from "@phosphor-icons/react";
 import { Drawer } from "vaul";
 
 interface Props {
@@ -11,15 +11,10 @@ interface Props {
   sessions: SessionSummaryResponse[];
   currentSessionId: string | null;
   isLoading: boolean;
-  isDeleting?: boolean;
   onSelectSession: (sessionId: string) => void;
   onNewChat: () => void;
   onClose: () => void;
   onOpenChange: (open: boolean) => void;
-  onDeleteSession?: (
-    sessionId: string,
-    title: string | null | undefined,
-  ) => void;
 }
 
 function formatDate(dateString: string) {
@@ -52,12 +47,10 @@ export function MobileDrawer({
   sessions,
   currentSessionId,
   isLoading,
-  isDeleting,
   onSelectSession,
   onNewChat,
   onClose,
   onOpenChange,
-  onDeleteSession,
 }: Props) {
   return (
     <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
@@ -95,52 +88,35 @@ export function MobileDrawer({
               </p>
             ) : (
               sessions.map((session) => (
-                <div
+                <button
                   key={session.id}
+                  onClick={() => onSelectSession(session.id)}
                   className={cn(
-                    "group relative flex w-full items-center rounded-lg transition-colors",
+                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
                     session.id === currentSessionId
                       ? "bg-zinc-100"
                       : "hover:bg-zinc-50",
                   )}
                 >
-                  <button
-                    onClick={() => onSelectSession(session.id)}
-                    className="flex-1 px-3 py-2.5 text-left"
-                  >
-                    <div className="flex min-w-0 max-w-full flex-col overflow-hidden pr-8">
-                      <div className="min-w-0 max-w-full">
-                        <Text
-                          variant="body"
-                          className={cn(
-                            "truncate font-normal",
-                            session.id === currentSessionId
-                              ? "text-zinc-600"
-                              : "text-zinc-800",
-                          )}
-                        >
-                          {session.title || "Untitled chat"}
-                        </Text>
-                      </div>
-                      <Text variant="small" className="text-neutral-400">
-                        {formatDate(session.updated_at)}
+                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
+                    <div className="min-w-0 max-w-full">
+                      <Text
+                        variant="body"
+                        className={cn(
+                          "truncate font-normal",
+                          session.id === currentSessionId
+                            ? "text-zinc-600"
+                            : "text-zinc-800",
+                        )}
+                      >
+                        {session.title || "Untitled chat"}
                       </Text>
                     </div>
-                  </button>
-                  {onDeleteSession && (
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteSession(session.id, session.title);
-                      }}
-                      disabled={isDeleting}
-                      className="absolute right-2 rounded p-1.5 text-zinc-400 transition-all hover:bg-red-100 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50"
-                      aria-label="Delete chat"
-                    >
-                      <TrashIcon className="h-4 w-4" />
-                    </button>
-                  )}
-                </div>
+                    <Text variant="small" className="text-neutral-400">
+                      {formatDate(session.updated_at)}
+                    </Text>
+                  </div>
+                </button>
               ))
             )}
           </div>

autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileHeader/MobileHeader.tsx

@@ -1,22 +1,46 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
-import { ListIcon } from "@phosphor-icons/react";
+import { ListIcon, TrashIcon } from "@phosphor-icons/react";
 
 interface Props {
   onOpenDrawer: () => void;
+  showDelete?: boolean;
+  isDeleting?: boolean;
+  onDelete?: () => void;
 }
 
-export function MobileHeader({ onOpenDrawer }: Props) {
+export function MobileHeader({
+  onOpenDrawer,
+  showDelete,
+  isDeleting,
+  onDelete,
+}: Props) {
   return (
-    <Button
-      variant="icon"
-      size="icon"
-      aria-label="Open sessions"
-      onClick={onOpenDrawer}
-      className="fixed z-50 bg-white shadow-md"
+    <div
+      className="fixed z-50 flex gap-2"
       style={{ left: "1rem", top: `${NAVBAR_HEIGHT_PX + 20}px` }}
     >
-      <ListIcon width="1.25rem" height="1.25rem" />
-    </Button>
+      <Button
+        variant="icon"
+        size="icon"
+        aria-label="Open sessions"
+        onClick={onOpenDrawer}
+        className="bg-white shadow-md"
+      >
+        <ListIcon width="1.25rem" height="1.25rem" />
+      </Button>
+      {showDelete && onDelete && (
+        <Button
+          variant="icon"
+          size="icon"
+          aria-label="Delete current chat"
+          onClick={onDelete}
+          disabled={isDeleting}
+          className="bg-white text-red-500 shadow-md hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
+        >
+          <TrashIcon width="1.25rem" height="1.25rem" />
+        </Button>
+      )}
+    </div>
   );
 }