diff --git a/packages/frontend/apps/ios/src/modal-config.tsx b/packages/frontend/apps/ios/src/modal-config.tsx
index 9f2902282e..55d6af9593 100644
--- a/packages/frontend/apps/ios/src/modal-config.tsx
+++ b/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>
   );
diff --git a/packages/frontend/component/src/ui/modal/context.ts b/packages/frontend/component/src/ui/modal/context.ts
index a28cda62e0..24bdbef924 100644
--- a/packages/frontend/component/src/ui/modal/context.ts
+++ b/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>({});
 
diff --git a/packages/frontend/component/src/ui/modal/modal.tsx b/packages/frontend/component/src/ui/modal/modal.tsx
index 8452c98932..3ee6aa6569 100644
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/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(