fix(ios): mobile modal occlusion issues (#11427)

Close [BS-2925](https://linear.app/affine-design/issue/BS-2925/移动端-dialog-遮挡相关)

packages/frontend/component/src/ui/menu/menu.types.ts

@@ -6,7 +6,7 @@ import type {
   DropdownMenuSubContentProps,
   DropdownMenuSubProps,
 } from '@radix-ui/react-dropdown-menu';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 export interface MenuProps {
   children: ReactNode;
@@ -15,6 +15,7 @@ export interface MenuProps {
   portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
   rootOptions?: Omit<DropdownMenuProps, 'children'>;
   contentOptions?: Omit<DropdownMenuContentProps, 'children'>;
+  contentWrapperStyle?: CSSProperties;
   noPortal?: boolean;
 }
 

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -32,6 +32,7 @@ export const MobileMenu = ({
 
     ...otherContentOptions
   } = {},
+  contentWrapperStyle,
   rootOptions,
 }: MenuProps) => {
   const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
@@ -131,6 +132,7 @@ export const MobileMenu = ({
             className: clsx(className, styles.mobileMenuModal),
             ...otherContentOptions,
           }}
+          contentWrapperStyle={contentWrapperStyle}
           disableAutoFocus={true}
         >
           <div

packages/frontend/core/src/mobile/components/sign-in/layout.css.ts

@@ -1,9 +1,11 @@
 import { style } from '@vanilla-extract/css';
 
+import { globalVars } from '../../styles/variables.css';
+
 export const root = style({
   padding: '40px',
   justifyContent: 'flex-end',
-  minHeight: '100dvh',
+  minHeight: `calc(100dvh - ${globalVars.appKeyboardHeight})`,
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',

packages/frontend/core/src/mobile/dialogs/selectors/date-selector.tsx

@@ -2,8 +2,11 @@ import { DatePicker, Menu } from '@affine/component';
 import type { DialogComponentProps } from '@affine/core/modules/dialogs';
 import type { WORKSPACE_DIALOG_SCHEMA } from '@affine/core/modules/dialogs/constant';
 import { useI18n } from '@affine/i18n';
+import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
 
+import { VirtualKeyboardService } from '../../modules/virtual-keyboard';
+
 /**
  * A global date selector popover for mobile, mainly used in blocksuite editor
  */
@@ -12,6 +15,9 @@ export const DateSelectorDialog = ({
   onSelect,
 }: DialogComponentProps<WORKSPACE_DIALOG_SCHEMA['date-selector']>) => {
   const [selectedDate, setSelectedDate] = useState<string>();
+  const keyboardService = useService(VirtualKeyboardService);
+  const keyboardHeight = useLiveData(keyboardService.height$);
+  const keyboardVisible = useLiveData(keyboardService.visible$);
 
   const t = useI18n();
 
@@ -44,6 +50,13 @@ export const DateSelectorDialog = ({
           padding: '15px 20px',
         },
       }}
+      contentWrapperStyle={
+        keyboardVisible
+          ? {
+              paddingBottom: `calc(${keyboardHeight}px + 12px)`,
+            }
+          : undefined
+      }
       items={
         <DatePicker
           weekDays={t['com.affine.calendar-date-picker.week-days']()}