[Gaubee]

Problem

首页启动时出现 React hydration 错误：

In HTML, <button> cannot be a descendant of <button>.
This will cause a hydration error.

错误堆栈显示 TokenItem > Item > DropdownMenuTrigger > Button > button 嵌套。

Root Cause

DropdownMenuTrigger 基于 @base-ui/react/menu 的 Menu.Trigger，默认渲染为 <button>。而内部又放了一个 <Button> 组件，导致嵌套的 <button> 元素。

Solution

遵循 shadcn/ui + base-ui 最佳实践，使用 render 属性将渲染委托给 Button 组件：

// Before (错误)
<DropdownMenuTrigger className="...">
  <Button variant="ghost" size="icon-sm">
    <IconDotsVertical />
  </Button>
</DropdownMenuTrigger>

// After (正确)
<DropdownMenuTrigger
  render={<Button variant="ghost" size="icon" className="size-11 rounded-lg" />}
>
  <IconDotsVertical className="text-muted-foreground size-5" />
</DropdownMenuTrigger>

Testing

• E2E 测试通过
• 截图基准已更新