feat: center title (#1504)

apps/web/src/components/blocksuite/header/index.tsx

@@ -1,4 +1,4 @@
-import { Content, QuickSearchTips } from '@affine/component';
+import { QuickSearchTips } from '@affine/component';
 import { getEnvironment } from '@affine/env';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
@@ -19,6 +19,7 @@ import {
   StyledSearchArrowWrapper,
   StyledSwitchWrapper,
   StyledTitle,
+  StyledTitleContainer,
   StyledTitleWrapper,
 } from './styles';
 
@@ -94,7 +95,7 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
     >
       {children}
       {!isPublic && (
-        <StyledTitle data-tauri-drag-region>
+        <StyledTitleContainer data-tauri-drag-region>
           <StyledTitleWrapper>
             <StyledSwitchWrapper>
               <EditorModeSwitch
@@ -105,7 +106,7 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
                 }}
               />
             </StyledSwitchWrapper>
-            <Content ellipsis={true}>{title || 'Untitled'}</Content>
+            <StyledTitle>{title || 'Untitled'}</StyledTitle>
             <QuickSearchTips
               data-testid="quick-search-tips"
               content={tipsContent()}
@@ -122,7 +123,7 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
               </StyledSearchArrowWrapper>
             </QuickSearchTips>
           </StyledTitleWrapper>
-        </StyledTitle>
+        </StyledTitleContainer>
       )}
     </Header>
   );

apps/web/src/components/blocksuite/header/styles.ts

@@ -1,4 +1,9 @@
-import { displayFlex, styled } from '@affine/component';
+import {
+  absoluteCenter,
+  displayFlex,
+  styled,
+  textEllipsis,
+} from '@affine/component';
 
 export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
   ({ hasWarning }) => {
@@ -17,20 +22,28 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
       background: theme.colors.pageBackground,
       transition: 'background-color 0.5s',
       zIndex: 99,
+      position: 'relative',
     };
   }
 );
 
-export const StyledTitle = styled('div')(({ theme }) => ({
+export const StyledTitleContainer = styled('div')(({ theme }) => ({
   width: '720px',
   height: '100%',
 
   margin: 'auto',
-
+  ...absoluteCenter({ horizontal: true, position: { top: 0 } }),
   ...displayFlex('center', 'center'),
   fontSize: theme.font.base,
 }));
 
+export const StyledTitle = styled('div')(() => {
+  return {
+    maxWidth: '620px',
+    ...textEllipsis(1),
+  };
+});
+
 export const StyledTitleWrapper = styled('div')({
   maxWidth: '720px',
   height: '100%',
@@ -128,7 +141,7 @@ export const StyledQuickSearchTipButton = styled('div')(({ theme }) => {
     cursor: 'pointer',
   };
 });
-export const StyledQuickSearchTipContent = styled('div')(({ theme }) => {
+export const StyledQuickSearchTipContent = styled('div')(() => {
   return {
     ...displayFlex('center', 'flex-end'),
     flexDirection: 'column',