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

* style(EndpointsMenu): add scrolling and dynamic height * style(SelectDropDownPop): add dynamic height
BertKiv · Jan 3, 2024 · e7bbd9f · e7bbd9f
1 parent 0445c94
commit e7bbd9f
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git 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
@@ -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>