fix(ios): avoid keyboard covering dialog (#11681)

close PD-2540

packages/frontend/apps/ios/src/modal-config.tsx

@@ -1,5 +1,6 @@
 import { ModalConfigContext } from '@affine/component';
 import { NavigationGestureService } from '@affine/core/mobile/modules/navigation-gesture';
+import { globalVars } from '@affine/core/mobile/styles/variables.css';
 import { useService } from '@toeverything/infra';
 import { type PropsWithChildren, useCallback } from 'react';
 
@@ -18,7 +19,9 @@ export const ModalConfigProvider = ({ children }: PropsWithChildren) => {
   }, [navigationGesture]);
 
   return (
-    <ModalConfigContext.Provider value={{ onOpen }}>
+    <ModalConfigContext.Provider
+      value={{ onOpen, dynamicKeyboardHeight: globalVars.appKeyboardHeight }}
+    >
       {children}
     </ModalConfigContext.Provider>
   );

packages/frontend/component/src/ui/modal/context.ts

@@ -7,6 +7,10 @@ export interface ModalConfig {
    * return a function to handle close/unmount callback
    */
   onOpen?: () => OnClose;
+  /**
+   * For mobile
+   */
+  dynamicKeyboardHeight?: string | number;
 }
 export const ModalConfigContext = createContext<ModalConfig>({});
 

packages/frontend/component/src/ui/modal/modal.tsx

@@ -131,7 +131,8 @@ function createContainer() {
 
 export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
   (props, ref) => {
-    const { onOpen: modalConfigOnOpen } = useContext(ModalConfigContext);
+    const { onOpen: modalConfigOnOpen, dynamicKeyboardHeight } =
+      useContext(ModalConfigContext);
     const {
       modal,
       portalOptions,
@@ -243,7 +244,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
           >
             <SafeArea
               bottom={BUILD_CONFIG.isMobileEdition}
-              bottomOffset={12}
+              bottomOffset={dynamicKeyboardHeight ?? 12}
               data-full-screen={fullScreen}
               data-modal={modal}
               className={clsx(