From b012e615bab019a4e19e83d05afae0826b48a3dc Mon Sep 17 00:00:00 2001
From: Joooye_34 <Joooye1991@gmail.com>
Date: Thu, 28 Sep 2023 15:04:12 +0800
Subject: [PATCH] fix(component): content should subtract height of the header
 (#4507)

---
 apps/core/src/components/page-detail-editor.css.ts | 7 ++++++-
 apps/core/src/components/page-detail-editor.tsx    | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/core/src/components/page-detail-editor.css.ts b/apps/core/src/components/page-detail-editor.css.ts
index 2628e9d0d3..b43e631dd4 100644
--- a/apps/core/src/components/page-detail-editor.css.ts
+++ b/apps/core/src/components/page-detail-editor.css.ts
@@ -15,7 +15,7 @@ export const pluginContainer = style({
 });
 
 export const editor = style({
-  height: 'calc(100% - 52px)',
+  height: '100%',
   selectors: {
     '&.full-screen': {
       vars: {
@@ -25,6 +25,11 @@ export const editor = style({
     },
   },
 });
+
+globalStyle(`${editor} .affine-doc-viewport`, {
+  paddingBottom: '150px',
+});
+
 globalStyle('.is-public-page affine-page-meta-data', {
   display: 'none',
 });
diff --git a/apps/core/src/components/page-detail-editor.tsx b/apps/core/src/components/page-detail-editor.tsx
index 3994466819..1d30cd7498 100644
--- a/apps/core/src/components/page-detail-editor.tsx
+++ b/apps/core/src/components/page-detail-editor.tsx
@@ -211,6 +211,7 @@ const LayoutPanel = memo(function LayoutPanel(
     return (
       <PanelGroup
         direction={node.direction}
+        style={depth === 0 ? { height: 'calc(100% - 52px)' } : undefined}
         className={depth === 0 ? editorContainer : undefined}
       >
         <Panel
@@ -260,7 +261,11 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
   if (layout === 'editor') {
     return (
       <Suspense>
-        <PanelGroup direction="horizontal" className={editorContainer}>
+        <PanelGroup
+          style={{ height: 'calc(100% - 52px)' }}
+          direction="horizontal"
+          className={editorContainer}
+        >
           <Panel>
             <EditorWrapper {...props} />
           </Panel>