From 38e46bc3b210e4825b1f988c9c1541ca8e0b8ce0 Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Mon, 11 Dec 2023 10:55:23 +0000
Subject: [PATCH] fix(core): adjust share edgeless display error (#5263)

close #5261

https://github.com/toeverything/AFFiNE/assets/102217452/8a7c4347-96df-45a3-973a-806876e5703d
---
 .../core/src/components/page-detail-editor.css.ts   |  3 +++
 .../core/src/components/pure/header/index.tsx       | 13 +++++++++++--
 .../core/src/components/pure/header/style.css.tsx   |  5 +++++
 .../frontend/core/src/pages/share/share-header.tsx  |  1 +
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/components/page-detail-editor.css.ts b/packages/frontend/core/src/components/page-detail-editor.css.ts
index d0c78166a2..ec702977ba 100644
--- a/packages/frontend/core/src/components/page-detail-editor.css.ts
+++ b/packages/frontend/core/src/components/page-detail-editor.css.ts
@@ -10,6 +10,9 @@ export const editor = style({
         '--affine-editor-side-padding': '15px',
       },
     },
+    '&.is-public-page': {
+      height: '100%',
+    },
   },
 });
 
diff --git a/packages/frontend/core/src/components/pure/header/index.tsx b/packages/frontend/core/src/components/pure/header/index.tsx
index 69a91f66af..4856a33975 100644
--- a/packages/frontend/core/src/components/pure/header/index.tsx
+++ b/packages/frontend/core/src/components/pure/header/index.tsx
@@ -16,12 +16,19 @@ interface HeaderPros {
   right?: ReactNode;
   center?: ReactNode;
   bottomBorder?: boolean;
+  isFloat?: boolean;
 }
 
 // The Header component is used to solve the following problems
 // 1. Manage layout issues independently of page or business logic
 // 2. Dynamic centered middle element (relative to the main-container), when the middle element is detected to collide with the two elements, the line wrapping process is performed
-export const Header = ({ left, center, right, bottomBorder }: HeaderPros) => {
+export const Header = ({
+  left,
+  center,
+  right,
+  bottomBorder,
+  isFloat,
+}: HeaderPros) => {
   const sidebarSwitchRef = useRef<HTMLDivElement | null>(null);
   const leftSlotRef = useRef<HTMLDivElement | null>(null);
   const centerSlotRef = useRef<HTMLDivElement | null>(null);
@@ -45,7 +52,9 @@ export const Header = ({ left, center, right, bottomBorder }: HeaderPros) => {
   const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
   return (
     <div
-      className={clsx(style.header, bottomBorder && style.bottomBorder)}
+      className={clsx(style.header, bottomBorder && style.bottomBorder, {
+        [style.headerFloat]: isFloat,
+      })}
       data-open={open}
       data-sidebar-floating={appSidebarFloating}
       data-testid="header"
diff --git a/packages/frontend/core/src/components/pure/header/style.css.tsx b/packages/frontend/core/src/components/pure/header/style.css.tsx
index 90ed34dced..faea9cac52 100644
--- a/packages/frontend/core/src/components/pure/header/style.css.tsx
+++ b/packages/frontend/core/src/components/pure/header/style.css.tsx
@@ -24,6 +24,11 @@ export const header = style({
   },
 } as ComplexStyleRule);
 
+export const headerFloat = style({
+  position: 'absolute',
+  width: '100%',
+});
+
 export const bottomBorder = style({
   borderBottom: '1px solid var(--affine-border-color)',
 });
diff --git a/packages/frontend/core/src/pages/share/share-header.tsx b/packages/frontend/core/src/pages/share/share-header.tsx
index bbcf38f4be..54e4eb956f 100644
--- a/packages/frontend/core/src/pages/share/share-header.tsx
+++ b/packages/frontend/core/src/pages/share/share-header.tsx
@@ -20,6 +20,7 @@ export function ShareHeader({
 
   return (
     <Header
+      isFloat={publishMode === 'edgeless'}
       left={<ShareHeaderLeftItem />}
       center={
         <BlockSuiteHeaderTitle