fix(mcp): align the token scope select with the name input and button

Radix Select renders a hidden native <select> as a sibling of the trigger.
Inside the space-y-2 wrapper, the row's items-end alignment pushed that
1px node to the column bottom, lifting the visible select ~8px above the
name input and button. Wrap the Select so the hidden node no longer picks
up the wrapper spacing; all three controls now share a bottom edge.
This commit is contained in:
Víctor Falcón 2026-07-17 17:18:31 +02:00
parent 8fed5851bc
commit 96a7ad157e
1 changed files with 30 additions and 23 deletions

View File

@ -205,30 +205,37 @@ export default function Mcp() {
<Label htmlFor="token-scope">
{__('Access')}
</Label>
<Select
value={form.data.scope}
onValueChange={(value) =>
form.setData(
'scope',
value as 'read' | 'read_write',
)
}
>
<SelectTrigger
id="token-scope"
className="w-full sm:w-48"
{/* Radix Select renders a hidden native <select> next to the
trigger; wrap it so the parent's space-y never pushes that
hidden node below the trigger and breaks the row alignment. */}
<div className="w-full sm:w-48">
<Select
value={form.data.scope}
onValueChange={(value) =>
form.setData(
'scope',
value as
| 'read'
| 'read_write',
)
}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="read">
{__('Read only')}
</SelectItem>
<SelectItem value="read_write">
{__('Read & write')}
</SelectItem>
</SelectContent>
</Select>
<SelectTrigger
id="token-scope"
className="w-full"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="read">
{__('Read only')}
</SelectItem>
<SelectItem value="read_write">
{__('Read & write')}
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<Button
type="submit"