diff --git a/ui/components/shadcn/select/multiselect.tsx b/ui/components/shadcn/select/multiselect.tsx index a9e1544935..d1988d3bd6 100644 --- a/ui/components/shadcn/select/multiselect.tsx +++ b/ui/components/shadcn/select/multiselect.tsx @@ -365,8 +365,9 @@ export function MultiSelectContent({ ref={listRef} onWheelCapture={stopWheelPropagation} style={{ - maxHeight: - "min(300px, var(--radix-popover-content-available-height, 300px))", + maxHeight: canSearch + ? "min(300px, calc(var(--radix-popover-content-available-height, 300px) - 37px))" + : "min(300px, var(--radix-popover-content-available-height, 300px))", }} className="minimal-scrollbar overflow-x-hidden overflow-y-auto overscroll-contain p-3" > diff --git a/ui/components/shadcn/select/select.test.tsx b/ui/components/shadcn/select/select.test.tsx deleted file mode 100644 index 10fe8ec490..0000000000 --- a/ui/components/shadcn/select/select.test.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import { describe, expect, it } from "vitest"; - -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "./select"; - -Object.defineProperty(HTMLElement.prototype, "hasPointerCapture", { - writable: true, - configurable: true, - value: () => false, -}); - -Object.defineProperty(HTMLElement.prototype, "scrollIntoView", { - writable: true, - configurable: true, - value: () => {}, -}); - -describe("Select", () => { - it("keeps long option lists scrollable inside the dropdown", async () => { - // Given - const user = userEvent.setup(); - - render( - , - ); - - // When - await user.click(screen.getByRole("combobox", { name: /options/i })); - - // Then - const viewport = screen - .getByRole("listbox") - .querySelector('[data-slot="select-viewport"]'); - expect(screen.getByRole("listbox")).toHaveStyle({ - maxHeight: "var(--radix-select-content-available-height)", - }); - expect(viewport).toHaveClass("minimal-scrollbar"); - expect(viewport).toHaveStyle({ - maxHeight: - "min(300px, var(--radix-select-content-available-height, 300px))", - }); - expect(viewport).toHaveClass("overflow-y-auto"); - expect(viewport).toHaveClass("overscroll-contain"); - }); -});