opensource/proxycast
3
0
Fork 0
mirror of https://github.com/aiclientproxy/proxycast.git synced 2026-09-24 23:10:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: stabilize Select dropdown position with popper mode

Browse Source 
- Add position="popper" to Select.Content for stable positioning
- Add side="bottom" and align="start" for consistent dropdown direction
- Use CSS variable for min-width to match trigger width
- Remove relative positioning that caused layout issues

This fixes the dropdown jumping between top and bottom positions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
coso
2026-01-12 16:54:49 +08:00
co-authored by Claude Opus 4.5
parent 9789e7d8a8
commit 816394fade
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/api-server/ApiServerPage.tsx
+15 -3
View File
@@ -880,7 +880,13 @@ export function ApiServerPage() {
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content className="relative z-50 min-w-[200px] overflow-hidden rounded-md border border-border bg-white dark:bg-gray-900 text-foreground shadow-lg animate-in fade-in-80 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2">
<Select.Content
position="popper"
side="bottom"
align="start"
sideOffset={4}
className="z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border border-border bg-white dark:bg-gray-900 text-foreground shadow-lg"
>
<Select.Viewport className="p-1 bg-white dark:bg-gray-900">
<Select.Item
value="127.0.0.1"
@@ -1170,8 +1176,14 @@ export function ApiServerPage() {
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content className="relative z-50 max-h-[300px] min-w-[300px] overflow-hidden rounded-md border border-border bg-white dark:bg-gray-900 text-foreground shadow-lg animate-in fade-in-80 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2">
<Select.Viewport className="p-1 max-h-[280px] overflow-y-auto">
<Select.Content
position="popper"
side="bottom"
align="start"
sideOffset={4}
className="z-50 max-h-[300px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border border-border bg-white dark:bg-gray-900 text-foreground shadow-lg"
>
<Select.Viewport className="p-1">
{allModels.map((model) => (
<Select.Item
key={model.id}