style: adjust page list header style (#3599)

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

@@ -124,6 +124,7 @@ const PluginHeader = () => {
       disposes = Object.entries(headerItems).map(([id, headerItem]) => {
         const div = document.createElement('div');
         div.setAttribute('plugin-id', id);
+        div.style.display = 'flex';
         const cleanup = headerItem(div);
         root.appendChild(div);
         return () => {
@@ -192,7 +193,12 @@ export const Header = forwardRef<
         data-is-edgeless={mode === 'edgeless'}
         data-is-page-list={props.currentPage === null}
       >
-        <div className={styles.headerLeftSide}>
+        <div
+          className={clsx(styles.headerLeftSide, {
+            [styles.headerLeftSideColumn]:
+              isWindowsDesktop || props.currentPage === null,
+          })}
+        >
           <div>{!open && <SidebarSwitch />}</div>
           <div
             className={clsx(styles.headerLeftSideItem, {
@@ -207,6 +213,8 @@ export const Header = forwardRef<
         <div
           className={clsx(styles.headerRightSide, {
             [styles.headerRightSideWindow]: isWindowsDesktop,
+            [styles.headerRightSideColumn]:
+              isWindowsDesktop || props.currentPage === null,
           })}
         >
           <PluginHeader />

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

@@ -116,6 +116,8 @@ export const headerLeftSide = style({
   display: 'flex',
   alignItems: 'center',
   transition: 'all .15s',
+});
+export const headerLeftSideColumn = style({
   '@container': {
     [`${headerVanillaContainer} (max-width: 900px)`]: {
       flexDirection: 'column',
@@ -149,6 +151,9 @@ export const headerRightSide = style({
   marginLeft: '20px',
   justifyContent: 'flex-end',
   transition: 'all .15s',
+});
+
+export const headerRightSideColumn = style({
   '@container': {
     [`${headerVanillaContainer} (max-width: 900px)`]: {
       position: 'absolute',
@@ -162,7 +167,6 @@ export const headerRightSide = style({
 export const headerRightSideWindow = style({
   marginRight: '140px',
 });
-
 export const browserWarning = style({
   backgroundColor: 'var(--affine-background-warning-color)',
   color: 'var(--affine-warning-color)',