Adjusted max height for select boxes (#916)

- Max Height of 450px
- In case max height exceeds the size of the view port, then we decrease the size of the dropdown

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

src/components/DropdownSelector/DropdownSelector.tsx

@@ -42,7 +42,6 @@ const DropdownBlock = styled.div<DropDownBlockProps>(
       lightV2.white,
     ),
     padding: 8,
-    maxHeight: 450,
     minWidth: useAnchorWidth ? 160 : 0,
     overflowX: "hidden",
     overflowY: "auto",
@@ -177,6 +176,18 @@ const calcElementPosition = (
     returnItem.width = bounds.width;
   }
 
+  //max height of dropdown
+
+  let defaultMaxHeight = 450;
+  returnItem.maxHeight = defaultMaxHeight;
+
+  const calcHeight =
+    window.innerHeight - bounds.top - bounds.height - defaultMaxHeight;
+
+  if (calcHeight < 0) {
+    returnItem.maxHeight = window.innerHeight - bounds.top - bounds.height - 40;
+  }
+
   return returnItem;
 };