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`

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,
+      mainAxis: 0,
-      ignoreShift: true,
       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>`;
   }
 }
 

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 }) => {
+      .then(({ x, y }) => {
-        if (!ignoreShift) {
-          x += data.shift?.x ?? 0;
-          y += data.shift?.y ?? 0;
-        }
         Object.assign(popperElement.style, {
           position: 'absolute',
           zIndex: 1,