From cbce1660b1803d2584b90f5b694fec9070997d6c Mon Sep 17 00:00:00 2001
From: Anchel135 <yakoveidelman1@gmail.com>
Date: Wed, 25 Sep 2024 14:42:46 +0300
Subject: [PATCH] give the dropdown content max height

---
 app/components/ui/combobox.tsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/components/ui/combobox.tsx b/app/components/ui/combobox.tsx
index caa1ae83..abe201c5 100644
--- a/app/components/ui/combobox.tsx
+++ b/app/components/ui/combobox.tsx
@@ -102,22 +102,25 @@ export default function Combobox({ isSelectGraph, disabled = false, inTable, typ
             open={open}
           />
         </DropdownMenuTrigger>
-        <DropdownMenuContent side="bottom" className="min-w-52">
+        <DropdownMenuContent side="bottom" className="min-w-52 max-h-[30lvh] flex flex-col">
           {
             options.length > 0 &&
-            options.map((option, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <DropdownMenuItem key={index}>
-                <Button
-                  className="w-full p-2"
-                  label={option}
-                  onClick={() => {
-                    setSelectedValue(option)
-                    setOpen(false)
-                  }}
-                />
-              </DropdownMenuItem>
-            ))
+            <ul className="shrink grow overflow-auto">
+              {
+                options.map((option) => (
+                  <DropdownMenuItem key={option}>
+                    <Button
+                      className="w-full p-2"
+                      label={option}
+                      onClick={() => {
+                        setSelectedValue(option)
+                        setOpen(false)
+                      }}
+                    />
+                  </DropdownMenuItem>
+                ))
+              }
+            </ul>
           }
           {
             isSelectGraph &&