style: add text overflow style for collections (#3292)

Co-authored-by: Alex Yang <himself65@outlook.com>

apps/core/src/components/blocksuite/workspace-header/header.tsx

@@ -200,7 +200,7 @@ export const Header = forwardRef<
         data-testid="editor-header-items"
         data-is-edgeless={mode === 'edgeless'}
       >
-        <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div className={styles.headerLeftSide}>
           {!open && <SidebarSwitch />}
           {props.leftSlot}
         </div>

apps/core/src/components/blocksuite/workspace-header/styles.css.ts

@@ -83,13 +83,23 @@ export const titleWrapper = style({
   justifyContent: 'center',
   alignItems: 'center',
 });
-
+export const headerLeftSide = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '150px',
+  '@media': {
+    '(max-width: 900px)': {
+      width: 'auto',
+    },
+  },
+});
 export const headerRightSide = style({
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   gap: '12px',
   zIndex: 1,
+  justifyContent: 'flex-end',
 });
 
 export const browserWarning = style({
@@ -153,7 +163,6 @@ export const allPageListTitleWrapper = style({
   fontSize: 'var(--affine-font-base)',
   color: 'var(--affine-text-primary-color)',
   display: 'flex',
-  justifyContent: 'center',
   alignItems: 'center',
   '::after': {
     content: '""',