fix: modal styles

src/components/Modal/styles.css

@@ -1,13 +1,13 @@
 .modal {
   background: rgba(85,84,85,.8);
-  height: calc(100% + 76px);
+  height: 100vh;
-  left: 0;
-  margin-inline: 50%;
-  overflow: hidden;
   position: fixed;
-  top: -76px;
+  left: 0;
-  -webkit-transform: translate(-50%);
+  top: 0;
-  transform: translate(-50%);
+  /* margin-inline: 50%; */
+  /* overflow: scroll; */
+  /* -webkit-transform: translate(-50%);
+  transform: translate(-50%); */
   width: 100vw;
   z-index: 2000;
 }
@@ -17,11 +17,13 @@
   background: #fff;
   width: 100%;
   max-width: 375px;
+  max-height: calc(100vh - 200px);
+  overflow: scroll;
   top: 50%;
   left: 50%;
   z-index: 3;
   border-radius: 16px;
-  padding: 64px 24px;
+  padding: 64px 24px 16px;
   transform: translate(-50%,-50%);
 }
 

src/components/PaymentPage/index.tsx

@@ -11,7 +11,7 @@ import {
   GooglePayBanner,
   // GooglePayButton,
   // CardButton,
-  CardModal,
+  // CardModal,
 } from "./methods";
 import ErrorModal from "./ErrorModal";
 import UserHeader from "../UserHeader";
@@ -26,7 +26,7 @@ import { StripeButton, StripeModal } from "./methods/Stripe";
 function PaymentPage(): JSX.Element {
   const { t } = useTranslation();
   const { applePay } = usePayment();
-  const [openCardModal, setOpenCardModal] = useState(false);
+  // const [openCardModal, setOpenCardModal] = useState(false);
   const [openStripeModal, setOpenStripeModal] = useState(false);
   const [openErrorModal, setOpenErrorModal] = useState(false);
   const dispatch = useDispatch();
@@ -83,12 +83,12 @@ function PaymentPage(): JSX.Element {
                 ),
               })}
             </p>
-            <CardModal
+            {/* <CardModal
               open={openCardModal}
               onClose={() => setOpenCardModal(false)}
               onSuccess={onSuccess}
               onError={onError}
-            />
+            /> */}
             <StripeModal
               open={openStripeModal}
               onClose={() => setOpenStripeModal(false)}