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

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

blocksuite/affine/components/src/context-menu/menu-renderer.ts

@@ -490,6 +490,7 @@ export type MenuHandler = {
 
 const popMobileMenu = (options: MenuOptions): MenuHandler => {
   const model = createModal(document.body);
+  model.style.position = 'fixed';
   const menu = new Menu({
     ...options,
     onClose: () => {

blocksuite/affine/components/src/embed-card-modal/embed-card-create-modal.ts

@@ -1,6 +1,9 @@
-import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
+import {
+  EmbedOptionProvider,
+  VirtualKeyboardProvider,
+} from '@blocksuite/affine-shared/services';
 import { isValidUrl, stopPropagation } from '@blocksuite/affine-shared/utils';
-import { WithDisposable } from '@blocksuite/global/lit';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import type { EditorHost } from '@blocksuite/std';
 import { ShadowlessElement } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
@@ -8,11 +11,14 @@ import type { BlockModel } from '@blocksuite/store';
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 
 import { toast } from '../toast';
 import { embedCardModalStyles } from './styles.js';
 
-export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
+export class EmbedCardCreateModal extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
   static override styles = embedCardModalStyles;
 
   private readonly _onCancel = () => {
@@ -98,7 +104,14 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
   }
 
   override render() {
-    return html`<div class="embed-card-modal">
+    const keyboard = this.host.std.getOptional(VirtualKeyboardProvider);
+    const style = styleMap({
+      height: keyboard?.visible$.value
+        ? `calc(100% - ${keyboard.height$.value}px)`
+        : undefined,
+    });
+
+    return html`<div class="embed-card-modal" style=${style}>
       <div class="embed-card-modal-mask" @click=${this._onCancel}></div>
       <div class="embed-card-modal-wrapper">
         <div class="embed-card-modal-row">

blocksuite/affine/components/src/embed-card-modal/styles.ts

@@ -2,6 +2,17 @@ import { fontXSStyle, panelBaseStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 export const embedCardModalStyles = css`
+  .embed-card-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    height: 100%;
+    transition: height 0.3s ease-in-out;
+  }
+
   .embed-card-modal-mask {
     position: absolute;
     left: 0;