Improve Select dropdown layering and popper sizing.

Raise z-index for dialog compatibility and let Radix constrain content height in popper mode.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Developing-Gamer 2026-06-02 10:57:33 -07:00
parent 27851f20c8
commit 3bcd96e39e

View File

@ -86,12 +86,13 @@ const SelectContent = forwardRefIfNeeded<
<SelectPrimitive.Content
ref={ref}
className={cn(
"stack-scope relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-black/[0.08] dark:border-white/[0.08] bg-white/95 dark:bg-background/95 backdrop-blur-xl text-popover-foreground shadow-lg ring-1 ring-black/[0.08] dark:ring-white/[0.08] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"stack-scope relative z-[100] max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-black/[0.08] dark:border-white/[0.08] bg-white/95 dark:bg-background/95 backdrop-blur-xl text-popover-foreground shadow-lg ring-1 ring-black/[0.08] dark:ring-white/[0.08] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
style={{ maxHeight: "var(--radix-select-content-available-height)" }}
{...props}
>
<SelectScrollUpButton />
@ -99,7 +100,7 @@ const SelectContent = forwardRefIfNeeded<
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
"w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}