fix(mobile): popover styles (#15351)

blocksuite/affine/blocks/bookmark/package.json

@@ -29,7 +29,7 @@
     "yjs": "^13.6.27"
   },
   "devDependencies": {
-    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.10",
     "playwright": "=1.58.2",
     "vitest": "^4.1.8"
   },

blocksuite/affine/components/src/toolbar/menu-button.ts

@@ -55,6 +55,7 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
       },
       mainAxis: 0,
       offsetHeight: 6 * 4,
+      topLayer: true,
       ...this.popperOptions,
     });
   }
@@ -124,6 +125,14 @@ export class EditorMenuContent extends LitElement {
       outline: none;
     }
 
+    :host([popover]) {
+      inset: auto;
+      margin: 0;
+      border: 0;
+      background: transparent;
+      color: inherit;
+    }
+
     :host([data-show]) {
       display: flex;
       justify-content: center;

blocksuite/affine/inlines/footnote/package.json

@@ -25,7 +25,7 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.10",
     "playwright": "=1.58.2",
     "vitest": "^4.1.8"
   },

blocksuite/affine/shared/src/utils/button-popper.ts

@@ -37,6 +37,7 @@ const ATTR_SHOW = 'data-show';
 export type ButtonPopperOptions = {
   reference: HTMLElement;
   popperElement: HTMLElement;
+  topLayer?: boolean;
   stateUpdated?: (state: { display: Display }) => void;
   mainAxis?: number;
   crossAxis?: number;
@@ -62,6 +63,7 @@ export function createButtonPopper(options: ButtonPopperOptions) {
   const {
     reference,
     popperElement,
+    topLayer = false,
     stateUpdated = () => {},
     mainAxis,
     crossAxis,
@@ -69,6 +71,12 @@ export function createButtonPopper(options: ButtonPopperOptions) {
     rootBoundary,
     offsetHeight,
   } = options;
+  const useTopLayer =
+    topLayer && typeof popperElement.showPopover === 'function';
+
+  if (useTopLayer) {
+    popperElement.popover = 'manual';
+  }
 
   const originMaxHeight = window.getComputedStyle(popperElement).maxHeight;
 
@@ -79,6 +87,7 @@ export function createButtonPopper(options: ButtonPopperOptions) {
     };
 
     computePosition(reference, popperElement, {
+      strategy: useTopLayer ? 'fixed' : 'absolute',
       middleware: [
         offset({
           mainAxis: mainAxis ?? 14,
@@ -102,7 +111,7 @@ export function createButtonPopper(options: ButtonPopperOptions) {
     })
       .then(({ x, y }) => {
         Object.assign(popperElement.style, {
-          position: 'absolute',
+          position: useTopLayer ? 'fixed' : 'absolute',
           zIndex: 1,
           left: `${x}px`,
           top: `${y}px`,
@@ -118,6 +127,9 @@ export function createButtonPopper(options: ButtonPopperOptions) {
 
     if (!displayed) {
       popperElement.setAttribute(ATTR_SHOW, '');
+      if (useTopLayer) {
+        popperElement.showPopover();
+      }
       display = 'show';
       stateUpdated({ display });
     }
@@ -130,6 +142,9 @@ export function createButtonPopper(options: ButtonPopperOptions) {
 
   const hide = () => {
     if (display === 'hidden') return;
+    if (useTopLayer) {
+      popperElement.hidePopover();
+    }
     popperElement.removeAttribute(ATTR_SHOW);
     display = 'hidden';
     stateUpdated({ display });

blocksuite/framework/std/package.json

@@ -33,7 +33,7 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.10",
     "playwright": "=1.58.2",
     "vitest": "^4.1.8"
   },

blocksuite/integration-test/package.json

@@ -35,7 +35,7 @@
   ],
   "devDependencies": {
     "@vanilla-extract/vite-plugin": "^5.0.0",
-    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.10",
     "playwright": "=1.58.2",
     "vite": "^7.3.5",
     "vite-plugin-wasm": "^3.5.0",