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

close TOV-671

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -8,7 +8,6 @@ import {
   PageEditor,
 } from '@blocksuite/presets';
 import { type Doc } from '@blocksuite/store';
-import clsx from 'clsx';
 import React, {
   forwardRef,
   useCallback,
@@ -103,10 +102,7 @@ export const BlocksuiteDocEditor = forwardRef<
 
   return (
     <div className={styles.docEditorRoot}>
-      <div
+      <div className={styles.affineDocViewport}>
-        className={clsx('affine-page-viewport', styles.affineDocViewport)}
-        data-doc-viewport={true}
-      >
         {!isJournal ? (
           <adapted.DocTitle doc={page} ref={titleRef} />
         ) : (

packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts

@@ -5,28 +5,10 @@ export const docEditorRoot = style({
   background: cssVar('backgroundPrimaryColor'),
 });
 
-// brings styles of .affine-page-viewport from blocksuite
 export const affineDocViewport = style({
   display: 'flex',
   flexDirection: 'column',
-  userSelect: 'none',
+  paddingBottom: '150px',
-  containerName: 'viewport',
-  // todo: find out what this does in bs
-  containerType: 'inline-size',
-  background: cssVar('backgroundPrimaryColor'),
-  '@media': {
-    print: {
-      display: 'none',
-      zIndex: -1,
-    },
-  },
-  selectors: {
-    '&[data-doc-viewport="true"]': {
-      overflowX: 'visible',
-      overflowY: 'visible',
-      height: 'auto',
-    },
-  },
 });
 
 export const docContainer = style({

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}>
+              <Scrollable.Viewport
-                <TopTip pageId={currentPageId} workspace={currentWorkspace} />
+                className={clsx(
+                  'affine-page-viewport',
+                  styles.affineDocViewport,
+                  styles.editorContainer
+                )}
+              >
                 <PageDetailEditor
                   pageId={currentPageId}
                   onLoad={onLoad}