fix: menu in peek view content not scrollable issue (#7412)

when using [dialog.overlay](https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/Dialog.tsx#L203-L211
), whole app is affected by [react-scroll library](8923c513d2/src/SideEffect.tsx (L131-L134)
):

In the current implementation, only the contents in the dialog content will be scrollable and cannot be configured in current API.

This PR introduces a simple div overlay to get rid of this issue.

fix BS-696

packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts

@@ -100,6 +100,7 @@ export const modalOverlay = style({
   zIndex: cssVar('zIndexModal'),
   backgroundColor: cssVar('black30'),
   viewTransitionName: vtOverlayFade,
+  pointerEvents: 'auto',
 });
 
 export const modalContentWrapper = style({

packages/frontend/core/src/modules/peek-view/view/modal-container.tsx

@@ -18,7 +18,11 @@ const contentOptions: Dialog.DialogContentProps = {
   ['data-testid' as string]: 'peek-view-modal',
   onPointerDownOutside: e => {
     const el = e.target as HTMLElement;
-    if (el.closest('[data-peek-view-wrapper]')) {
+    if (
+      el.closest('[data-peek-view-wrapper]') ||
+      // workaround for slash menu click outside issue
+      el.closest('affine-slash-menu')
+    ) {
       e.preventDefault();
     }
   },
@@ -83,6 +87,8 @@ export type PeekViewModalContainerProps = PropsWithChildren<{
   testId?: string;
 }>;
 
+const PeekViewModalOverlay = 'div';
+
 export const PeekViewModalContainer = forwardRef<
   HTMLDivElement,
   PeekViewModalContainerProps
@@ -149,7 +155,7 @@ export const PeekViewModalContainer = forwardRef<
     <PeekViewContext.Provider value={emptyContext}>
       <Dialog.Root modal open={vtOpen} onOpenChange={onOpenChange}>
         <Dialog.Portal>
-          <Dialog.Overlay
+          <PeekViewModalOverlay
             className={styles.modalOverlay}
             onAnimationStart={onAnimationStart}
             onAnimationEnd={onAnimateEnd}