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.
This commit is contained in:
yyh 2026-03-03 16:42:44 +08:00
parent 959121aa0b
commit 109cae8692
No known key found for this signature in database
2 changed files with 6 additions and 5 deletions

View File

@ -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({

View File

@ -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>