Как отобразить модальный вид на текущее окно просмотра на мобильном устройстве?

Question

Проблема:

Модальное отображение корректно отображается в веб-представлении, но в мобильном представлении оно не отображается в текущей прокручиваемой области (области просмотра) экрана, а открывается в верхней части экрана, что не виден пользователю.

Стек:

1) Reactjs

2) Реакция Bootstrap

Устройство выпуска:

Google Pixel 3 XL, android 10, 1440x2960 ​​

Код:

базовый модальный:

const Popup = ({ show, handleClose, modalType, dialogClassName, modalContent = null, modalFooter = null, t }) => {

    const heading = {
        changeShipDate: t("CHANGE_SHIPDATE.HEADER"),
        cancelMembership: t("CANCEL_MEMBERSHIP.HEADER"),
        orderDetails: t("ORDER.HEADER"),
        createNewAddress: t("NEW_SHIPPING_MODAL.NEW_ADDRESS_HEADING"),
        updateBilling: t("CREDIT_CARD.PAYMENT"),
        trackOrder: t("TRACK_ORDER.HEADING"),
        shippingInfo: t("SHIPPING.SHIP_ADDRESS"),
        updateFlavor: t("CHANGE_FLAVOR.HEADER"),
        updateStackChange: t("CHANGE_FLAVOR.HEADER"),
        updateMembership: t("CHANGE_FLAVOR.HEADER"),
        buyItAgain: t("BUY_IT_AGAIN.HEADER"),
        convertToHD: t("CHANGE_FLAVOR.HEADER"),
        createNewAddressPudo: "PICK UP INFORMATION"
    };

    const modalHeading = heading[modalType];

    return (
        <Modal
            backdrop="static"
            show={show}
            className={`order-details-modal ${modalType}`}
            size={modalType === "orderDetails" ? "lg" : "md"}
            dialogClassName={dialogClassName}
            onHide={handleClose}
            autoFocus={true}
        >
            <Modal.Header closeButton className={modalHeading ? "" : "no-border"}>
                <Modal.Title>{modalHeading}</Modal.Title>
            </Modal.Header>
            <Modal.Body className={modalHeading ? "" : "pt-0"}>{modalContent}</Modal.Body>
            {modalFooter}
        </Modal>
    );
};

релевантно css в index.s css:

.modal .modal-dialog .modal-content {
  text-align: left;

  .modal-body {


    table {
      border: none;
      margin: 0;
      padding: 0;
      background: none;
    }

  }
}

modal.s css:

.order-details-modal {

  .btn-default-orders {
    background: $picton-blue;
    color: #fff;
  }
  .pudo-search-btn {
    background: $picton-blue;
    color: #fff;
    font-display:#3498DB;
    width: 160px;
    margin-left: 50px;
  }
  .no-border {
    border: 0px;
  }
  .no-border.modal-header {
    padding: 10px;
  }
  .modal-header {
    .modal-title {
      font-size: 14px;
      color: $dove-gray;
    }
    .close {
      margin: 0px;
      padding: 0px;
      top: 10px;
      right: 0px;
    }
  }
  .cancel-btn {
    background: #fff;
    border: 2px solid $picton-blue;
    color: $mine-shaft;
    padding: 6px 15px;
  }
  .update-btn {
    background: $picton-blue;
    border: 2px solid $picton-blue;
    color: #fff;
    padding: 6px 15px;
  }
  .checkbox-text {
    color: #707070;
    font-size: 0.875rem;
    line-height: 0.75rem;
    font-weight: 600;
  }
  /*
    * Change Ship Date
    */
  .change-ship-date {
    .note {
      color: $blue;
      font-size: 13px;
    }
  }
  .custom-pudo-form {
    .note {
      color: $blue;
      font-size: 13px;
    }
    margin-left: 90px;
  }
  .cancel-membership {
    .note {
      color: $blue;
      font-size: 13px;
    }
  }
  .credit-card-preferences {
    .heading {
      color: $dove-gray;
      font-size: 14px;
    }
  }
  .order-details {
    .row-border {
      border-bottom: 1px solid $mine-shaft;
      padding: 10px;
      td {
        padding: 10px 0px;
      }
    }
    .details-table {
      background: #f4f4f4;
      margin: 15px;
    }
    .address,
    .billing {
      font-size: 13px;
      font-weight: 400;
    }
  }
}
.order-details-modal.shippingInfo {
  .modal-dialog {
    max-width: 600px !important;
  }
  .address {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: normal;
    background-color: white;
    font-style: normal;
    font-size: 13px;
  }
}

.address-form-highlight {
  background-color: gainsboro;
}