From 8ffc096fee89187caefd2fef2c5fddd50cce5c58 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 16 May 2023 17:35:57 +0800
Subject: [PATCH] fix: text overflows in the header option menu  (#2393)

---
 .../workspace-header/header-right-items/editor-option-menu.tsx  | 2 --
 .../header-right-items/theme-mode-switch/style.ts               | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx b/apps/web/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
index 75092a21d0..8f13b642e9 100644
--- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
+++ b/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}
diff --git a/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts b/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts
index 649299a97f..52a08bacd1 100644
--- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts
+++ b/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')(() => {