From 816394fade6c3df3dff4cae46921726119c935c0 Mon Sep 17 00:00:00 2001
From: coso <wutongci@hotmail.com>
Date: Mon, 12 Jan 2026 16:54:49 +0800
Subject: [PATCH] fix: stabilize Select dropdown position with popper mode

- 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>
---
 src/components/api-server/ApiServerPage.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/api-server/ApiServerPage.tsx b/src/components/api-server/ApiServerPage.tsx
index 9bf6bc369..7187b4cb0 100644
--- a/src/components/api-server/ApiServerPage.tsx
+++ b/src/components/api-server/ApiServerPage.tsx
@@ -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}