fix: text overflows in the header option menu (#2393)

apps/web/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx

@@ -40,7 +40,6 @@ const CommonMenu = () => {
   return (
     <FlexWrapper alignItems="center" justifyContent="center">
       <Menu
-        width={276}
         content={content}
         placement="bottom"
         disablePortal={true}
@@ -137,7 +136,6 @@ const PageMenu = () => {
     <>
       <FlexWrapper alignItems="center" justifyContent="center">
         <Menu
-          width={276}
           content={EditMenu}
           placement="bottom-end"
           disablePortal={true}

apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts

@@ -30,10 +30,12 @@ export const StyledThemeButton = styled('button')<{
   active: boolean;
 }>(({ active }) => {
   return {
+    padding: '0 8px',
     height: '100%',
     flex: 1,
     cursor: 'pointer',
     color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
+    whiteSpace: 'nowrap',
   };
 });
 export const StyledVerticalDivider = styled('div')(() => {