fix(mobile): popover styles (#15351)

Cargo.lock

@@ -2930,7 +2930,7 @@ dependencies = [
  "libc",
  "log",
  "rustversion",
- "windows-link 0.2.1",
+ "windows-link 0.1.3",
  "windows-result 0.4.1",
 ]
 
@@ -6504,9 +6504,9 @@ dependencies = [
 
 [[package]]
 name = "quinn"
-version = "0.11.9"
+version = "0.11.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b9e20a958963c291dc322d98411f541009df2ced7b5a4f2bd52337638cfccf20"
+checksum = "0c1a41e437b6bbd489372cd4971de128e85c855f56c57f283d20ff016cf7c0a8"
 dependencies = [
  "bytes",
  "cfg_aliases",
@@ -6524,15 +6524,16 @@ dependencies = [
 
 [[package]]
 name = "quinn-proto"
-version = "0.11.14"
+version = "0.11.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "434b42fec591c96ef50e21e886936e66d3cc3f737104fdb9b737c40ffb94c098"
+checksum = "2f4bfc015262b9df63c8845072ce59068853ff5872180c2ce2f13038b970e560"
 dependencies = [
  "aws-lc-rs",
  "bytes",
- "getrandom 0.3.4",
+ "getrandom 0.4.2",
  "lru-slab",
- "rand 0.9.4",
+ "rand 0.10.1",
+ "rand_pcg",
  "ring",
  "rustc-hash 2.1.1",
  "rustls",
@@ -6665,6 +6666,15 @@ dependencies = [
  "rand 0.9.4",
 ]
 
+[[package]]
+name = "rand_pcg"
+version = "0.10.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "caa0f4137e1c0a72f4c651489402276c8e8e1cf081f3b0ba156d2cbeef09e86a"
+dependencies = [
+ "rand_core 0.10.1",
+]
+
 [[package]]
 name = "rawpointer"
 version = "0.2.1"
@@ -10157,7 +10167,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.48.0",
 ]
 
 [[package]]

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",

package.json

@@ -64,9 +64,9 @@
     "@types/node": "^22.0.0",
     "@typescript-eslint/parser": "^8.55.0",
     "@vanilla-extract/vite-plugin": "^5.0.0",
-    "@vitest/browser": "^4.1.8",
-    "@vitest/coverage-istanbul": "^4.1.8",
-    "@vitest/ui": "^4.1.8",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/coverage-istanbul": "^4.1.10",
+    "@vitest/ui": "^4.1.10",
     "cross-env": "^10.1.0",
     "electron": "^39.0.0",
     "eslint": "^9.39.2",
@@ -91,7 +91,7 @@
     "typescript-eslint": "^8.55.0",
     "unplugin-swc": "^1.5.9",
     "vite": "^7.3.5",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.10"
   },
   "packageManager": "yarn@4.13.0",
   "resolutions": {
@@ -167,16 +167,13 @@
     "typedarray": "npm:@nolyfill/typedarray@^1",
     "macos-alias": "npm:@napi-rs/macos-alias@0.0.4",
     "fs-xattr": "npm:@napi-rs/xattr@latest",
-    "@opentelemetry/core": "^2.8.0",
-    "@opentelemetry/resources": "^2.8.0",
-    "@opentelemetry/sdk-trace-base": "^2.8.0",
-    "@tootallnate/once": "^2.0.1",
+    "@opentelemetry/core": "^2.10.0",
     "ioredis": "^5.11.1",
     "js-yaml@npm:^4.1.0": "^4.2.0",
     "js-yaml@npm:4.1.1": "^4.2.0",
     "multer": "^2.2.0",
     "protobufjs": "^7.6.4",
-    "tar": "^7.5.16",
+    "tar": "^7.5.21",
     "tmp": "^0.2.7",
     "ws@npm:^8.18.0": "^8.21.0",
     "ws@npm:^8.18.3": "^8.21.0",

packages/backend/server/package.json

@@ -45,21 +45,21 @@
     "@node-rs/argon2": "^2.0.2",
     "@node-rs/crc32": "^1.10.6",
     "@opentelemetry/api": "^1.9.0",
-    "@opentelemetry/core": "^2.8.0",
-    "@opentelemetry/exporter-prometheus": "^0.219.0",
-    "@opentelemetry/exporter-zipkin": "^2.8.0",
+    "@opentelemetry/core": "^2.10.0",
+    "@opentelemetry/exporter-prometheus": "^0.221.0",
+    "@opentelemetry/exporter-zipkin": "^2.10.0",
     "@opentelemetry/host-metrics": "^0.39.0",
-    "@opentelemetry/instrumentation": "^0.219.0",
+    "@opentelemetry/instrumentation": "^0.221.0",
     "@opentelemetry/instrumentation-graphql": "^0.67.0",
-    "@opentelemetry/instrumentation-http": "^0.219.0",
+    "@opentelemetry/instrumentation-http": "^0.221.0",
     "@opentelemetry/instrumentation-ioredis": "^0.67.0",
     "@opentelemetry/instrumentation-nestjs-core": "^0.65.0",
     "@opentelemetry/instrumentation-socket.io": "^0.66.0",
-    "@opentelemetry/resources": "^2.8.0",
-    "@opentelemetry/sdk-metrics": "^2.8.0",
-    "@opentelemetry/sdk-node": "^0.219.0",
-    "@opentelemetry/sdk-trace-base": "^2.8.0",
-    "@opentelemetry/sdk-trace-node": "^2.8.0",
+    "@opentelemetry/resources": "^2.10.0",
+    "@opentelemetry/sdk-metrics": "^2.10.0",
+    "@opentelemetry/sdk-node": "^0.221.0",
+    "@opentelemetry/sdk-trace-base": "^2.10.0",
+    "@opentelemetry/sdk-trace-node": "^2.10.0",
     "@opentelemetry/semantic-conventions": "^1.41.1",
     "@prisma/client": "^6.6.0",
     "@prisma/instrumentation": "^6.7.0",

packages/frontend/admin/package.json

@@ -51,7 +51,7 @@
     "react-dom": "^19.2.1",
     "react-hook-form": "^7.54.1",
     "react-resizable-panels": "^3.0.6",
-    "react-router-dom": "^7.18.0",
+    "react-router-dom": "^7.18.1",
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "swr": "^2.3.7",

packages/frontend/apps/electron/package.json

@@ -53,8 +53,8 @@
     "@sentry/esbuild-plugin": "^5.3.0",
     "@toeverything/infra": "workspace:*",
     "@types/set-cookie-parser": "^2.4.10",
-    "app-builder-lib": "^26.8.1",
-    "builder-util-runtime": "^9.5.1",
+    "app-builder-lib": "^26.15.0",
+    "builder-util-runtime": "^9.7.0",
     "cross-env": "^10.1.0",
     "debug": "^4.4.0",
     "electron": "^39.0.0",
@@ -77,7 +77,7 @@
   },
   "dependencies": {
     "async-call-rpc": "^6.4.2",
-    "electron-updater": "^6.8.3",
+    "electron-updater": "^6.8.9",
     "link-preview-js": "^4.0.0",
     "set-cookie-parser": "^2.7.1",
     "yjs": "^13.6.27"

packages/frontend/routes/package.json

@@ -16,7 +16,6 @@
     "vitest": "^4.1.8"
   },
   "peerDependencies": {
-    "react": "^19.2.1",
-    "react-router-dom": "^7.18.0"
+    "react": "^19.2.1"
   }
 }

tests/blocksuite/e2e/format-bar.spec.ts

@@ -239,10 +239,22 @@ test('should format quick bar be able to change background color', async ({
   // select `456` paragraph by dragging
   await dragBetweenIndices(page, [1, 0], [1, 3]);
 
-  const { highlight } = getFormatBar(page);
+  const { formatBar, highlight } = getFormatBar(page);
+
+  await formatBar.evaluate(toolbar => {
+    toolbar.style.overflowX = 'auto';
+  });
 
   await highlight.highlightBtn.click();
   await expect(highlight.redForegroundBtn).toBeVisible();
+  await expect(
+    formatBar.locator('editor-menu-content[data-show]')
+  ).toHaveAttribute('popover', 'manual');
+  expect(
+    await formatBar
+      .locator('editor-menu-content[data-show]')
+      .evaluate(menu => menu.matches(':popover-open'))
+  ).toBe(true);
 
   // TODO(@fundon): these recent settings should be added to the dropdown menu.
   // await expect(highlight.highlightBtn).toHaveAttribute(

tools/cli/package.json

@@ -32,7 +32,7 @@
     "jsonc-parser": "^3.3.1",
     "lodash-es": "^4.17.23",
     "mime-types": "^3.0.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.18",
     "postcss-loader": "^8.2.1",
     "postcss-selector-parser": "^7.1.0",
     "prettier": "^3.7.4",