From f032df2298cce79306351860317f797d088099ec Mon Sep 17 00:00:00 2001
From: Jovines <1246634075@qq.com>
Date: Wed, 1 Apr 2026 20:32:32 +0800
Subject: [PATCH] fix(mobile): close settings drawers and remove extra top
 spacing (#770)

* fix(mobile): close side drawers when opening settings

* fix(mobile): remove duplicate top inset in drawers

---------

Co-authored-by: Jovines <jovines@qq.com>
---
 packages/ui/src/components/layout/MainLayout.tsx  | 15 +++++++++++++++
 .../ui/src/components/session/SessionSidebar.tsx  |  9 ++++++++-
 packages/ui/src/styles/mobile.css                 |  4 ++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index f1aa42c8..b13f8bf1 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -145,6 +145,21 @@ export const MainLayout: React.FC = () => {
         }
     }, [isSessionSwitcherOpen, isMobile]);
 
+    // Ensure mobile drawers are closed when opening full-screen settings
+    useEffect(() => {
+        if (!isMobile || !isSettingsDialogOpen) {
+            return;
+        }
+
+        setMobileLeftDrawerOpen(false);
+        if (isSessionSwitcherOpen) {
+            useUIStore.getState().setSessionSwitcherOpen(false);
+        }
+        if (isRightSidebarOpen) {
+            setRightSidebarOpen(false);
+        }
+    }, [isMobile, isSettingsDialogOpen, isSessionSwitcherOpen, isRightSidebarOpen, setRightSidebarOpen]);
+
     // Sync right drawer and git sidebar state
     useEffect(() => {
         if (isMobile) {
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
index d38fd615..474063c7 100644
--- a/packages/ui/src/components/session/SessionSidebar.tsx
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -683,6 +683,13 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     });
   }, [updateStore]);
 
+  const handleOpenSettings = React.useCallback(() => {
+    if (mobileVariant) {
+      setSessionSwitcherOpen(false);
+    }
+    setSettingsDialogOpen(true);
+  }, [mobileVariant, setSessionSwitcherOpen, setSettingsDialogOpen]);
+
   const showSidebarUpdateButton =
     updateStore.available &&
     (updateStore.runtimeType === 'desktop' || updateStore.runtimeType === 'web');
@@ -1520,7 +1527,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       />
 
       <SidebarFooter
-        onOpenSettings={() => setSettingsDialogOpen(true)}
+        onOpenSettings={handleOpenSettings}
         onOpenShortcuts={toggleHelpDialog}
         onOpenAbout={() => setAboutDialogOpen(true)}
         onOpenUpdate={handleOpenUpdateDialog}
diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index f431cd52..a63d9768 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -281,9 +281,9 @@
       padding-bottom: var(--oc-safe-area-bottom-visual) !important;
     }
 
-    /* Drawer safe area - only top/bottom padding, no positioning */
+    /* Drawer safe area - top already offset by header height */
     .drawer-safe-area {
-      padding-top: var(--oc-safe-area-top);
+      padding-top: 0;
       padding-bottom: var(--oc-safe-area-bottom-visual);
     }