From e6bf4ca6e59d11fb13dd3ad85f91ec98bafccd4c Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Mon, 16 Dec 2024 09:49:12 +0000
Subject: [PATCH] chore(core): use flexbox to stretch editor height (#9174)

---
 .../blocksuite/block-suite-editor/lit-adaper.tsx         | 6 +++---
 .../blocksuite/block-suite-editor/styles.css.ts          | 9 ++++++++-
 2 files changed, 11 insertions(+), 4 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 5e677123ec..f566687231 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
@@ -281,7 +281,7 @@ export const BlocksuiteDocEditor = forwardRef<
 
   return (
     <>
-      <div className={styles.affineDocViewport} style={{ height: '100%' }}>
+      <div className={styles.affineDocViewport}>
         {!isJournal ? (
           <adapted.DocTitle doc={page} ref={onTitleRef} />
         ) : (
@@ -351,9 +351,9 @@ export const BlocksuiteEdgelessEditor = forwardRef<
   }, []);
 
   return (
-    <>
+    <div className={styles.affineEdgelessDocViewport}>
       <adapted.EdgelessEditor ref={onDocRef} doc={page} specs={specs} />
       {portals}
-    </>
+    </div>
   );
 });
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 5e349d0bf4..2ee4ebccf7 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
@@ -2,15 +2,22 @@ import { cssVar } from '@toeverything/theme';
 import { style, type StyleRule } from '@vanilla-extract/css';
 
 export const docEditorRoot = style({
-  display: 'block',
   overflowX: 'clip',
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 export const affineDocViewport = style({
+  height: '100%',
+  flex: 1,
   display: 'flex',
   flexDirection: 'column',
   paddingBottom: '100px',
 });
+export const affineEdgelessDocViewport = style({
+  height: '100%',
+  flex: 1,
+});
 
 export const docContainer = style({
   display: 'block',