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

@@ -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) {

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}

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);
     }