Fix select input styles

src/ListBox.module.css

@@ -5,6 +5,9 @@
   overflow-y: auto;
   list-style: none;
   background-color: transparent;
+  border: 1px solid var(--inputBorderColor);
+  background-color: var(--bgColor1);
+  border-radius: 8px;
 }
 
 .option {
@@ -25,7 +28,7 @@
 }
 
 .option.focused {
-  background-color: var(--bgColor3);
+  background-color: rgba(111, 120, 130, 0.2);
 }
 
 .option.disabled {

src/Modal.module.css

@@ -17,6 +17,8 @@
   border-radius: 8px;
   max-width: 90vw;
   width: 600px;
+  display: flex;
+  flex-direction: column;
 }
 
 .modalHeader {

src/Popover.jsx

@@ -1,15 +1,14 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useRef } from "react";
-import {
+import { DismissButton, useOverlay } from "@react-aria/overlays";
-  DismissButton,
-  useOverlay,
-  OverlayContainer,
-} from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
 import classNames from "classnames";
 import styles from "./Popover.module.css";
 
 export const Popover = forwardRef(
   ({ isOpen = true, onClose, className, children, ...rest }, ref) => {
+    const fallbackRef = useRef();
+    const popoverRef = ref || fallbackRef;
+
     const { overlayProps } = useOverlay(
       {
         isOpen,
@@ -17,23 +16,21 @@ export const Popover = forwardRef(
         shouldCloseOnBlur: true,
         isDismissable: true,
       },
-      ref
+      popoverRef
     );
 
     return (
-      <OverlayContainer>
       <FocusScope restoreFocus>
         <div
           {...overlayProps}
           {...rest}
           className={classNames(styles.popover, className)}
-            ref={ref}
+          ref={popoverRef}
         >
           {children}
           <DismissButton onDismiss={onClose} />
         </div>
       </FocusScope>
-      </OverlayContainer>
     );
   }
 );

src/PopoverMenu.jsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import styles from "./PopoverMenu.module.css";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useMenuTrigger } from "@react-aria/menu";
-import { useOverlayPosition } from "@react-aria/overlays";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import classNames from "classnames";
 import { Popover } from "./Popover";
 
@@ -52,6 +52,7 @@ export function PopoverMenuTrigger({
         ref={buttonRef}
       />
       {popoverMenuState.isOpen && (
+        <OverlayContainer>
           <Popover
             {...overlayProps}
             isOpen={popoverMenuState.isOpen}
@@ -64,6 +65,7 @@ export function PopoverMenuTrigger({
               onClose: popoverMenuState.close,
             })}
           </Popover>
+        </OverlayContainer>
       )}
     </div>
   );

src/SelectInput.jsx

@@ -4,7 +4,6 @@ import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";
 import { Popover } from "./Popover";
 import { ListBox } from "./ListBox";
-import { useOverlayPosition } from "@react-aria/overlays";
 import styles from "./SelectInput.module.css";
 import classNames from "classnames";
 import { ReactComponent as ArrowDownIcon } from "./icons/ArrowDown.svg";
@@ -21,16 +20,6 @@ export function SelectInput(props) {
 
   const { buttonProps } = useButton(triggerProps, ref);
 
-  const popoverRef = useRef();
-
-  const { overlayProps } = useOverlayPosition({
-    targetRef: ref,
-    overlayRef: popoverRef,
-    placement: "bottom left",
-    offset: 5,
-    isOpen: state.isOpen,
-  });
-
   return (
     <div className={classNames(styles.selectInput, props.className)}>
       <h4 {...labelProps} className={styles.label}>
@@ -52,15 +41,12 @@ export function SelectInput(props) {
       </button>
       {state.isOpen && (
         <Popover
-          ref={popoverRef}
           isOpen={state.isOpen}
           onClose={state.close}
           className={styles.popover}
-          {...overlayProps}
         >
           <ListBox
             {...menuProps}
-            className
             state={state}
             optionClassName={styles.option}
           />

src/SelectInput.module.css

@@ -2,6 +2,7 @@
   position: relative;
   display: inline-block;
   margin-bottom: 28px;
+  max-width: 444px;
 }
 
 .label {
@@ -23,6 +24,7 @@
   color: var(--textColor1);
   height: 40px;
   max-width: 100%;
+  width: 100%;
 }
 
 .selectedItem {
@@ -33,12 +35,8 @@
 }
 
 .popover {
-}
+  position: absolute;
-
+  margin-top: 5px;
-.option:first-child {
+  width: 100%;
-  border-radius: 8px 8px 0 0;
+  z-index: 1;
-}
-
-.option:last-child {
-  border-radius: 0 0 8px 8px;
 }

src/Tabs.module.css

@@ -1,6 +1,7 @@
 .tabContainer {
   width: 100%;
   display: flex;
+  flex: 1;
 }
 
 .tabList {