From e7bbd9fe0a926667915ce30436a4e153a1a42d7c Mon Sep 17 00:00:00 2001
From: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Date: Wed, 3 Jan 2024 10:07:36 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20Add=20Dynamic=20Height?=
 =?UTF-8?q?=20to=20Endpoint/Model=20Menus=20(#1480)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style(EndpointsMenu): add scrolling and dynamic height

* style(SelectDropDownPop): add dynamic height
---
 client/src/components/Chat/Menus/EndpointsMenu.tsx | 2 +-
 client/src/components/ui/SelectDropDownPop.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Chat/Menus/EndpointsMenu.tsx b/client/src/components/Chat/Menus/EndpointsMenu.tsx
index f7339ac2989..a7d4901210f 100644
--- a/client/src/components/Chat/Menus/EndpointsMenu.tsx
+++ b/client/src/components/Chat/Menus/EndpointsMenu.tsx
@@ -36,7 +36,7 @@ const EndpointsMenu: FC = () => {
           <Content
             side="bottom"
             align="start"
-            className="mt-2 min-w-[340px] overflow-hidden rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+            className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white lg:max-h-[75vh]"
           >
             <EndpointItems endpoints={endpoints} selected={selected} />
           </Content>
diff --git a/client/src/components/ui/SelectDropDownPop.tsx b/client/src/components/ui/SelectDropDownPop.tsx
index 0e40b70d583..51c453fa6ea 100644
--- a/client/src/components/ui/SelectDropDownPop.tsx
+++ b/client/src/components/ui/SelectDropDownPop.tsx
@@ -95,7 +95,7 @@ function SelectDropDownPop({
             <Content
               side="bottom"
               align="start"
-              className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white lg:max-h-[52vh]"
             >
               {availableValues.map((option) => {
                 return (
@@ -105,7 +105,7 @@ function SelectDropDownPop({
                     value={option}
                     selected={!!(value && value === option)}
                     onClick={() => setValue(option)}
-                  ></MenuItem>
+                  />
                 );
               })}
             </Content>