use 700px for chain selector (#1547)

Author: gsteenkamp89

src/components/Modal/Modal.styles.ts

@@ -24,7 +24,7 @@ export const Wrapper = styled.div<WrapperType>`
   justify-content: center;
 
   width: 100vw;
-  height: 100vh;
+  height: 100dvh;
 
   z-index: 99998;
 
@@ -88,8 +88,15 @@ type ModalWrapperType = {
   bottomYOffset?: number;
   padding: "normal" | "thin";
 };
+
+// minimum y-axis margin
+const minimumMargin = 32;
+
 export const ModalContentWrapper = styled.div<ModalWrapperType>`
-  max-height: ${({ height }) => height ?? 400}px;
+  max-height: ${({ height, topYOffset }) =>
+    height
+      ? `min(calc(100svh - ${minimumMargin * 2}px - ${topYOffset ?? 0}px), ${height}px)`
+      : "calc(100svh - 64px)"};
   max-width: ${({ width }) => width ?? 800}px;
 
   height: fit-content;

src/components/Modal/Modal.tsx

@@ -16,7 +16,7 @@ export type ModalDirection = {
   mobile?: ModalDirectionOrientation;
 };
 
-type ModalProps = {
+export type ModalProps = {
   isOpen?: boolean;
   title?: string | JSX.Element;
 

src/components/Selector/Selector.tsx

@@ -6,6 +6,7 @@ import { Tooltip } from "components/Tooltip";
 import { QUERIESV2 } from "utils";
 import { ReactComponent as II } from "assets/icons/info.svg";
 import { useSelector } from "./useSelector";
+import { ModalProps } from "components/Modal/Modal";
 
 export type SelectorElementType<Value> = {
   value: Value;
@@ -23,6 +24,7 @@ export type SelectorPropType<Value> = {
   elements: SelectorElementType<Value>[];
   selectedValue: Value;
   setSelectedValue: (ind: Value) => void;
+  modalProps?: Partial<ModalProps>;
   displayElement?: JSX.Element;
   disabled?: boolean;
   "data-cy"?: string;
@@ -38,6 +40,7 @@ const Selector = <ElementValue,>({
   disabled,
   "data-cy": dataCy,
   allowSelectDisabled,
+  modalProps,
 }: SelectorPropType<ElementValue>) => {
   const { displayModal, setDisplayModal, selectedIndex, isMobile } =
     useSelector(elements, selectedValue);
@@ -66,8 +69,8 @@ const Selector = <ElementValue,>({
           desktop: "top",
           mobile: "bottom",
         }}
-        topYOffset={isMobile ? 16 : 112}
-        bottomYOffset={isMobile ? 112 : undefined}
+        topYOffset={isMobile ? undefined : 112}
+        bottomYOffset={isMobile ? 16 : undefined}
         exitOnOutsideClick
         title={
           typeof title === "string" ? (
@@ -80,6 +83,7 @@ const Selector = <ElementValue,>({
         }
         padding="thin"
         data-cy={`${dataCy}-modal`}
+        {...modalProps}
       >
         <ElementRowDivider />
         <ElementRowWrapper enableScroll={elements.length > 6}>

src/views/Bridge/components/ChainSelector.tsx

@@ -97,6 +97,10 @@ export function ChainSelector({
       }
       allowSelectDisabled={!isFrom}
       data-cy={`${fromOrTo}-chain-select`}
+      modalProps={{
+        height: 700,
+        bottomYOffset: 16,
+      }}
     />
   );
 }

src/views/Bridge/components/TokenSelector.tsx

@@ -168,6 +168,10 @@ export function TokenSelector({
           </Text>
         </CoinIconTextWrapper>
       }
+      modalProps={{
+        height: 700,
+        bottomYOffset: 16,
+      }}
       selectedValue={tokenToDisplay.symbol}
       title="Select a token"
       setSelectedValue={(v) => onSelectToken(v)}