From ab3e628badc6067a0939193685af65a1d7701aed Mon Sep 17 00:00:00 2001
From: ayxwi <274959179+xwil1@users.noreply.github.com>
Date: Wed, 1 Jul 2026 11:57:17 +0800
Subject: [PATCH] Fix scroll bounds for long select dropdowns (#4798)

Co-authored-by: Xvvln <180168103+Xvvln@users.noreply.github.com>
---
 src/components/ui/select.tsx                 |  2 +-
 tests/components/SelectContentScroll.test.ts | 29 ++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 tests/components/SelectContentScroll.test.ts

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index da9786805..42d8e6e0f 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -37,7 +37,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border-default bg-popover text-popover-foreground shadow-md 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",
+        "relative z-[100] max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border-default bg-popover text-popover-foreground shadow-md 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",
         className,
       )}
       position={position}
diff --git a/tests/components/SelectContentScroll.test.ts b/tests/components/SelectContentScroll.test.ts
new file mode 100644
index 000000000..18f215c43
--- /dev/null
+++ b/tests/components/SelectContentScroll.test.ts
@@ -0,0 +1,29 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const SELECT_TSX = path.resolve(
+  __dirname,
+  "..",
+  "..",
+  "src",
+  "components",
+  "ui",
+  "select.tsx",
+);
+
+describe("SelectContent scroll bounds", () => {
+  const source = fs.readFileSync(SELECT_TSX, "utf8");
+
+  it("limits popper content to the available viewport height", () => {
+    expect(source).toContain("--radix-select-content-available-height");
+    expect(source).toContain(
+      "max-h-[min(24rem,var(--radix-select-content-available-height))]",
+    );
+  });
+
+  it("allows long option lists to scroll vertically", () => {
+    expect(source).toContain("overflow-y-auto");
+    expect(source).toContain("overflow-x-hidden");
+  });
+});