🎨 style: Add Dynamic Height to Endpoint/Model Menus (danny-avila#1480)

* style(EndpointsMenu): add scrolling and dynamic height

* style(SelectDropDownPop): add dynamic height

Author: danny-avila

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>

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>