diff --git a/blocksuite/affine/components/src/toolbar/menu-button.ts b/blocksuite/affine/components/src/toolbar/menu-button.ts index 6fc3b17af..2f83d5365 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``; + return html`
`; } } diff --git a/blocksuite/affine/shared/src/utils/button-popper.ts b/blocksuite/affine/shared/src/utils/button-popper.ts index 910e8f6a3..669bbcebc 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,