Fix mobile layout issue when show header/footer on checkout page

Add the below CSS to your Footer Script (Admin panel > Storefront > Footer Script)

<style>
    .optimizedCheckout-contentPrimary .cart {
        display: none;
    }

    @media (min-width: 968px) {
        .optimizedCheckout-contentPrimary .cart {
            display: block;
        }
    }

    .ReactModalPortal .modal {
        display: block;
        top: 2% !important;
        height: auto;
        min-height: 0;
        border-width: 1px;
        box-shadow: 0 0 12px rgba(153, 153, 153, 0.4);
        overflow: auto;
    }

    @media (min-width: 551px) {
        .ReactModalPortal .modal {
            top: 50% !important;
        }
    }

    .ReactModalPortal .modal-body {
        max-height: none;
        height: auto;
        box-shadow: none;
        overflow: visible;
    }

    .ReactModalPortal .modal.is-active,
    .ReactModalPortal .modal.modal--afterOpen {
        visibility: visible;
    }
</style>