From eb0bcd9b997df99cfbd86aad561208c8e8f6ef5f Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Mon, 7 Apr 2025 06:30:06 +0000
Subject: [PATCH] fix(editor): improve menu content UX on toolbar (#11491)

* Added scrollbar style

![Screenshot 2025-04-07 at 11.50.19.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/c2a44dcc-7f24-44d5-a855-e2c1671e85f9.png)

* Used `padding` instead of `offset`
---
 .../components/src/toolbar/menu-button.ts     | 22 +++++++++++++------
 .../affine/shared/src/utils/button-popper.ts  |  8 +------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/blocksuite/affine/components/src/toolbar/menu-button.ts b/blocksuite/affine/components/src/toolbar/menu-button.ts
index 6fc3b17af9..2f83d53652 100644
--- a/blocksuite/affine/components/src/toolbar/menu-button.ts
+++ b/blocksuite/affine/components/src/toolbar/menu-button.ts
@@ -1,4 +1,7 @@
-import { panelBaseStyle } from '@blocksuite/affine-shared/styles';
+import {
+  panelBaseStyle,
+  scrollbarStyle,
+} from '@blocksuite/affine-shared/styles';
 import {
   type ButtonPopperOptions,
   createButtonPopper,
@@ -44,8 +47,7 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
           })
         );
       },
-      mainAxis: 12,
-      ignoreShift: true,
+      mainAxis: 0,
       offsetHeight: 6 * 4,
       ...this.popperOptions,
     });
@@ -111,15 +113,21 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
 export class EditorMenuContent extends LitElement {
   static override styles = css`
     :host {
+      padding: 12px 0;
       display: none;
       outline: none;
-      overscroll-behavior: contain;
-      overflow-y: auto;
     }
 
-    ${panelBaseStyle(':host([data-show])')}
     :host([data-show]) {
+      display: flex;
       justify-content: center;
+    }
+
+    ${panelBaseStyle('.content-wrapper')}
+    ${scrollbarStyle('.content-wrapper')}
+    .content-wrapper {
+      overscroll-behavior: contain;
+      overflow-y: auto;
       padding: var(--content-padding, 0 6px);
     }
 
@@ -152,7 +160,7 @@ export class EditorMenuContent extends LitElement {
   `;
 
   override render() {
-    return html`<slot></slot>`;
+    return html`<div class="content-wrapper"><slot></slot></div>`;
   }
 }
 
diff --git a/blocksuite/affine/shared/src/utils/button-popper.ts b/blocksuite/affine/shared/src/utils/button-popper.ts
index 910e8f6a34..669bbcebcd 100644
--- a/blocksuite/affine/shared/src/utils/button-popper.ts
+++ b/blocksuite/affine/shared/src/utils/button-popper.ts
@@ -42,7 +42,6 @@ export type ButtonPopperOptions = {
   crossAxis?: number;
   allowedPlacements?: Placement[];
   rootBoundary?: Rect | (() => Rect | undefined);
-  ignoreShift?: boolean;
   offsetHeight?: number;
 };
 /**
@@ -68,7 +67,6 @@ export function createButtonPopper(options: ButtonPopperOptions) {
     crossAxis,
     allowedPlacements = ['top', 'bottom'],
     rootBoundary,
-    ignoreShift,
     offsetHeight,
   } = options;
 
@@ -102,11 +100,7 @@ export function createButtonPopper(options: ButtonPopperOptions) {
         }),
       ],
     })
-      .then(({ x, y, middlewareData: data }) => {
-        if (!ignoreShift) {
-          x += data.shift?.x ?? 0;
-          y += data.shift?.y ?? 0;
-        }
+      .then(({ x, y }) => {
         Object.assign(popperElement.style, {
           position: 'absolute',
           zIndex: 1,