diff --git a/packages/app/src/components/explorer-sidebar.tsx b/packages/app/src/components/explorer-sidebar.tsx index dc857c3f1..567a66672 100644 --- a/packages/app/src/components/explorer-sidebar.tsx +++ b/packages/app/src/components/explorer-sidebar.tsx @@ -256,6 +256,30 @@ export function ExplorerSidebar({ width: resizeWidth.value, })); + const backdropCombinedStyle = useMemo( + () => [explorerStaticStyles.backdrop, backdropAnimatedStyle], + [backdropAnimatedStyle], + ); + const mobileSidebarStyle = useMemo( + () => [ + explorerStaticStyles.mobileSidebar, + { + width: windowWidth, + paddingTop: insets.top, + backgroundColor: theme.colors.surfaceSidebar, + }, + sidebarAnimatedStyle, + mobileKeyboardInsetStyle, + ], + [ + windowWidth, + insets.top, + theme.colors.surfaceSidebar, + sidebarAnimatedStyle, + mobileKeyboardInsetStyle, + ], + ); + // Mobile: full-screen overlay with gesture. // On web, keep it interactive only while open so closed sidebars don't eat taps. const overlayPointerEvents = isWeb ? (isOpen ? "auto" : "none") : "box-none"; @@ -270,22 +294,10 @@ export function ExplorerSidebar({ return ( {/* Backdrop */} - + - +