fix: ui problem

packages/app/src/components/Header/index.tsx

@@ -26,7 +26,7 @@ const PopoverContent = () => {
         }}
       >
         {mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
-        Convert to {mode === 'page' ? 'edgeless' : 'page'}
+        Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
       </StyledMoreMenuItem>
       <StyledMoreMenuItem
         onClick={() => {
@@ -42,7 +42,7 @@ const PopoverContent = () => {
         }}
       >
         <ExportIcon />
-        Export to markdown
+        Export to Markdown
       </StyledMoreMenuItem>
     </>
   );

packages/app/src/components/Header/styles.ts

@@ -6,8 +6,13 @@ export const StyledHeader = styled('div')({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  position: 'relative',
+  background: 'var(--affine-page-background)',
+  transition: 'background-color 0.5s',
+  position: 'fixed',
+  left: '0',
+  top: '0',
   padding: '0 22px',
+  zIndex: '10',
 });
 
 export const StyledTitle = styled('div')({