From 68b33cbdbd65ace2ba41c6a88d58338fb4f5fb57 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Thu, 2 Mar 2023 00:39:49 -0600
Subject: [PATCH] fix: editor overflow (#1253)

---
 .../src/components/blocksuite/block-suite-editor/index.tsx   | 5 +++--
 apps/web/src/components/page-detail-editor.tsx               | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/blocksuite/block-suite-editor/index.tsx b/apps/web/src/components/blocksuite/block-suite-editor/index.tsx
index 522cdd754e..394cc67eec 100644
--- a/apps/web/src/components/blocksuite/block-suite-editor/index.tsx
+++ b/apps/web/src/components/blocksuite/block-suite-editor/index.tsx
@@ -3,7 +3,7 @@ import { BlockHub } from '@blocksuite/blocks';
 import { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
-import { useEffect, useRef } from 'react';
+import { CSSProperties, useEffect, useRef } from 'react';
 
 import { BlockSuiteWorkspace } from '../../../shared';
 
@@ -13,6 +13,7 @@ export type EditorProps = {
   mode: 'page' | 'edgeless';
   onInit?: (page: Page, editor: Readonly<EditorContainer>) => void;
   onLoad?: (page: Page, editor: EditorContainer) => void;
+  style?: CSSProperties;
 };
 
 import markdown from '../../../templates/Welcome-to-AFFiNE-Alpha-Downhills.md';
@@ -112,5 +113,5 @@ export const BlockSuiteEditor = (props: EditorProps) => {
       container.removeChild(editor);
     };
   }, [page]);
-  return <div className="editor-wrapper" ref={ref} />;
+  return <div className="editor-wrapper" style={props.style} ref={ref} />;
 };
diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx
index 5bcb8c7bd8..68d91d0521 100644
--- a/apps/web/src/components/page-detail-editor.tsx
+++ b/apps/web/src/components/page-detail-editor.tsx
@@ -54,6 +54,9 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
         {header}
       </BlockSuiteEditorHeader>
       <Editor
+        style={{
+          height: 'calc(100% - 60px)',
+        }}
         blockSuiteWorkspace={blockSuiteWorkspace}
         mode={meta.mode ?? 'page'}
         page={page}