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 = ({ }); }, [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 = ({ /> 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); }