From 109cae86925daf80aca1d5910f89804d7932cb2c Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Tue, 3 Mar 2026 16:42:44 +0800
Subject: [PATCH] fix(dropdown-menu): align menu item padding with main branch
 and use DropdownMenuItem for theme row

Reduce menuRowBaseClassName padding from px-3 to px-2 to match main branch spacing.
Replace raw div with DropdownMenuItem for theme row to fix icon alignment and ARIA semantics.
---
 web/app/components/base/ui/dropdown-menu/index.tsx   | 2 +-
 web/app/components/header/account-dropdown/index.tsx | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/app/components/base/ui/dropdown-menu/index.tsx b/web/app/components/base/ui/dropdown-menu/index.tsx
index f3651bdded..e839fd24ef 100644
--- a/web/app/components/base/ui/dropdown-menu/index.tsx
+++ b/web/app/components/base/ui/dropdown-menu/index.tsx
@@ -13,7 +13,7 @@ export const DropdownMenuSub = Menu.SubmenuRoot
 export const DropdownMenuGroup = Menu.Group
 export const DropdownMenuRadioGroup = Menu.RadioGroup
 
-const menuRowBaseClassName = 'mx-1 flex h-8 cursor-pointer select-none items-center rounded-lg px-3 outline-none'
+const menuRowBaseClassName = 'mx-1 flex h-8 cursor-pointer select-none items-center rounded-lg px-2 outline-none'
 const menuRowStateClassName = 'data-[highlighted]:bg-state-base-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
 
 export function DropdownMenuRadioItem({
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 5af347bd8f..4cf1f4efda 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -27,8 +27,6 @@ import Compliance from './compliance'
 import { ExternalLinkIndicator, MenuItemContent } from './menu-item-content'
 import Support from './support'
 
-const menuStaticRowClassName = 'flex h-8 w-full items-center rounded-lg px-3 text-text-secondary system-md-regular'
-
 type AccountMenuRouteItemProps = {
   href: string
   iconClassName: string
@@ -229,13 +227,16 @@ export default function AppSelector() {
             </>
           )}
           <AccountMenuSection>
-            <div className={cn(menuStaticRowClassName, 'hover:bg-transparent')}>
+            <DropdownMenuItem
+              className="cursor-default data-[highlighted]:bg-transparent"
+              onSelect={e => e.preventDefault()}
+            >
               <MenuItemContent
                 iconClassName="i-ri-t-shirt-2-line"
                 label={t('theme.theme', { ns: 'common' })}
                 trailing={<ThemeSwitcher />}
               />
-            </div>
+            </DropdownMenuItem>
           </AccountMenuSection>
           <DropdownMenuSeparator className="!my-0 bg-divider-subtle" />
           <AccountMenuSection>