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

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

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']()}