From f832ada98cf8fcf09339bd3a2c08cb95c95f5016 Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Tue, 12 Mar 2024 05:43:47 +0000
Subject: [PATCH] fix(core): cannot scroll when dragging (#6070)

close TOV-671
---
 .../block-suite-editor/lit-adaper.tsx         |  6 +-----
 .../block-suite-editor/styles.css.ts          | 20 +------------------
 .../workspace/detail-page/detail-page.css.ts  | 16 +++++++++++++++
 .../workspace/detail-page/detail-page.tsx     | 11 ++++++++--
 4 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
index ba718a95cf..59a0c77100 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+++ b/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
-        className={clsx('affine-page-viewport', styles.affineDocViewport)}
-        data-doc-viewport={true}
-      >
+      <div className={styles.affineDocViewport}>
         {!isJournal ? (
           <adapted.DocTitle doc={page} ref={titleRef} />
         ) : (
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
index 406b88f8de..11e85974ec 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
+++ b/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',
-  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',
-    },
-  },
+  paddingBottom: '150px',
 });
 
 export const docContainer = style({
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
index e6b996897c..784bc72a03 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
+++ b/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,
+    },
+  },
+});
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 497a4c984e..5bf605367d 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/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}