fix(core): adjust share edgeless display error (#5263)

close #5261

https://github.com/toeverything/AFFiNE/assets/102217452/8a7c4347-96df-45a3-973a-806876e5703d

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

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"

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

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