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>
-        <FocusScope restoreFocus>
+        <div
-          <div
+          {...overlayProps}
-            {...overlayProps}
+          {...rest}
-            {...rest}
+          className={classNames(styles.popover, className)}
-            className={classNames(styles.popover, className)}
+          ref={popoverRef}
-            ref={ref}
+        >
-          >
+          {children}
-            {children}
+          <DismissButton onDismiss={onClose} />
-            <DismissButton onDismiss={onClose} />
+        </div>
-          </div>
+      </FocusScope>
-        </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,18 +52,20 @@ export function PopoverMenuTrigger({
         ref={buttonRef}
       />
       {popoverMenuState.isOpen && (
-        <Popover
+        <OverlayContainer>
-          {...overlayProps}
+          <Popover
-          isOpen={popoverMenuState.isOpen}
+            {...overlayProps}
-          onClose={popoverMenuState.close}
+            isOpen={popoverMenuState.isOpen}
-          ref={popoverRef}
+            onClose={popoverMenuState.close}
-        >
+            ref={popoverRef}
-          {popoverMenu({
+          >
-            ...menuProps,
+            {popoverMenu({
-            autoFocus: popoverMenuState.focusStrategy,
+              ...menuProps,
-            onClose: popoverMenuState.close,
+              autoFocus: popoverMenuState.focusStrategy,
-          })}
+              onClose: popoverMenuState.close,
-        </Popover>
+            })}
+          </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 {