fix: dropdown menu entire right can be pulled down (#2568)

Co-authored-by: Whitewater <me@waterwater.moe>
(cherry picked from commit a01a3ef011)

packages/component/src/ui/button/dropdown.tsx

@@ -8,14 +8,14 @@ import {
 import * as styles from './styles.css';
 
 type DropdownButtonProps = {
-  onClickDropDown?: MouseEventHandler<SVGSVGElement>;
+  onClickDropDown?: MouseEventHandler<HTMLElement>;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const DropdownButton = forwardRef<
   HTMLButtonElement,
   DropdownButtonProps
 >(({ onClickDropDown, children, ...props }, ref) => {
-  const handleClickDropDown: MouseEventHandler<SVGSVGElement> = e => {
+  const handleClickDropDown: MouseEventHandler<HTMLElement> = e => {
     e.stopPropagation();
     onClickDropDown?.(e);
   };
@@ -23,12 +23,9 @@ export const DropdownButton = forwardRef<
     <button ref={ref} className={styles.dropdownBtn} {...props}>
       <span>{children}</span>
       <span className={styles.divider} />
-      <ArrowDownSmallIcon
+      <span className={styles.dropdownWrapper} onClick={handleClickDropDown}>
-        className={styles.icon}
+        <ArrowDownSmallIcon className={styles.icon} width={16} height={16} />
-        width={16}
+      </span>
-        height={16}
-        onClick={handleClickDropDown}
-      />
     </button>
   );
 });

packages/component/src/ui/button/styles.css.ts

@@ -5,7 +5,8 @@ export const dropdownBtn = style({
   alignItems: 'center',
   justifyContent: 'center',
   padding: '0 10px',
-  gap: '4px',
+  // fix dropdown button click area
+  paddingRight: 0,
   color: 'var(--affine-text-primary-color)',
   fontWeight: 600,
   background: 'var(--affine-button-gray-color)',
@@ -28,6 +29,19 @@ export const divider = style({
   width: '0.5px',
   height: '16px',
   background: 'var(--affine-border-color)',
+  // fix dropdown button click area
+  margin: '0 4px',
+  marginRight: 0,
+});
+
+export const dropdownWrapper = style({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingLeft: '4px',
+  paddingRight: '10px',
 });
 
 export const icon = style({