fix(ai): unbreak model dropdown — base-ui Trigger doesn't take asChild

The composer's model picker had <DropdownMenuTrigger asChild><button>...
which is the Radix Slot pattern. Project uses @base-ui/react where
Menu.Trigger has no asChild prop and renders its own <button>, so the
result was nested-button-inside-button (DOM-nesting violation) plus
asChild leaking as an unknown DOM attribute (React warning).

Dropped the inner <button> and put className/data-action straight on
the Trigger. Visual output identical, no more console errors.

This pattern is used by ~14 other routes (Button asChild + Link),
mostly behind sign-in-required states. They're broken too but rarely
fire — separate followup.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
2026-05-02 19:43:00 +10:00
parent 066a16bb8b
commit 7eb5093071

View File

@@ -1265,15 +1265,15 @@ function ModelSelector({
const label = prettyModelName(model)
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
data-action="ai-model"
className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
>
<span>{label}</span>
<ChevronDown className="size-4 opacity-70" />
</button>
{/* base-ui's Menu.Trigger renders its own <button>, so we don't wrap
* a nested <button> here (which Radix's asChild pattern would require).
* Styles + data-action go straight on the Trigger. */}
<DropdownMenuTrigger
data-action="ai-model"
className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
>
<span>{label}</span>
<ChevronDown className="size-4 opacity-70" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{models.map((m) => (