fix(core): cannot scroll when dragging (#6070)

close TOV-671

packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts

@@ -16,3 +16,19 @@ export const editorContainer = style({
   flex: 1,
   zIndex: 0,
 });
+// brings styles of .affine-page-viewport from blocksuite
+export const affineDocViewport = style({
+  display: 'flex',
+  flexDirection: 'column',
+  userSelect: 'none',
+  containerName: 'viewport',
+  // todo: find out what this does in bs
+  containerType: 'inline-size',
+  background: cssVar('backgroundPrimaryColor'),
+  '@media': {
+    print: {
+      display: 'none',
+      zIndex: -1,
+    },
+  },
+});

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -22,6 +22,7 @@ import {
 } from '@toeverything/infra';
 import { Workspace } from '@toeverything/infra';
 import { useService } from '@toeverything/infra';
+import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
 import {
   memo,
@@ -198,9 +199,15 @@ const DetailPageImpl = memo(function DetailPageImpl() {
         <div className={styles.mainContainer}>
           {/* Add a key to force rerender when page changed, to avoid error boundary persisting. */}
           <AffineErrorBoundary key={currentPageId}>
+            <TopTip pageId={currentPageId} workspace={currentWorkspace} />
             <Scrollable.Root>
-              <Scrollable.Viewport className={styles.editorContainer}>
-                <TopTip pageId={currentPageId} workspace={currentWorkspace} />
+              <Scrollable.Viewport
+                className={clsx(
+                  'affine-page-viewport',
+                  styles.affineDocViewport,
+                  styles.editorContainer
+                )}
+              >
                 <PageDetailEditor
                   pageId={currentPageId}
                   onLoad={onLoad}