fix(component): content should subtract height of the header (#4507)

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',
 });

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>