feat: modify option menu style (#1506)

apps/web/src/components/blocksuite/header/header-right-items/EditorOptionMenu.tsx

@@ -77,6 +77,7 @@ export const EditorOptionMenu = () => {
         {mode === 'page' ? t('Edgeless') : t('Page')}
       </MenuItem>
       <Menu
+        width={248}
         placement="left-start"
         content={
           <>
@@ -124,6 +125,7 @@ export const EditorOptionMenu = () => {
     <>
       <FlexWrapper alignItems="center" justifyContent="center">
         <Menu
+          width={276}
           content={EditMenu}
           placement="bottom-end"
           disablePortal={true}

packages/component/src/ui/menu/Menu.tsx

@@ -1,15 +1,23 @@
 import { TooltipProps } from '@mui/material';
+import { CSSProperties } from 'react';
 
 import { Popper, type PopperProps } from '../popper';
 import { StyledMenuWrapper } from './styles';
-export const Menu = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
-  const { content, placement = 'bottom-start', children } = props;
+
+export type MenuProps = {
+  width?: CSSProperties['width'];
+} & PopperProps &
+  Omit<TooltipProps, 'title'>;
+export const Menu = (props: MenuProps) => {
+  const { width, content, placement = 'bottom-start', children } = props;
   return content ? (
     <Popper
       {...props}
       showArrow={false}
       content={
-        <StyledMenuWrapper placement={placement}>{content}</StyledMenuWrapper>
+        <StyledMenuWrapper width={width} placement={placement}>
+          {content}
+        </StyledMenuWrapper>
       }
     >
       {children}

packages/component/src/ui/menu/styles.ts

@@ -1,10 +1,14 @@
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
+import { CSSProperties } from 'react';
 
 import { displayFlex, styled } from '../../styles';
 import StyledPopperContainer from '../shared/Container';
 
-export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
+export const StyledMenuWrapper = styled(StyledPopperContainer)<{
+  width?: CSSProperties['width'];
+}>(({ theme, width }) => {
   return {
+    width,
     background: theme.colors.popoverBackground,
     padding: '8px 4px',
     fontSize: '14px',
@@ -16,10 +20,11 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
 
 export const StyledArrow = styled(ArrowRightSmallIcon)({
   position: 'absolute',
-  right: 0,
+  right: '12px',
   top: 0,
   bottom: 0,
   margin: 'auto',
+  fontSize: '20px',
 });
 
 export const StyledMenuItem = styled('button')<{
@@ -29,7 +34,7 @@ export const StyledMenuItem = styled('button')<{
     width: '100%',
     borderRadius: '5px',
     padding: '0 14px',
-    fontSize: '14px',
+    fontSize: theme.font.base,
     height: '32px',
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',