Great question — answering as the UphillTech team:
Your scrolling issue comes from this style from an inline stylesheet in the head, which isn't from the snippet you shared since it affects the main site and not the modal generated. .shopify-buy-modal-is-active { height: 100%; overflow: auto; } Height 100% often has this issue, since it has no real context when applied to the html or body tags. Removing it or setting overflow: hidden; will resolve the issue. Also tested on mobile and it doesn't cause any issues there. For the "x" to close, there is no 400 font weight available, 600 is the next up. Add that to your json in the "modal" section (line 188 in your pen): "modal": { "styles": { "modal": { "background-color": "#f9f9f9" }, "close":...
Full answer by simplycurtis: https://stackoverflow.stackexchange.com/a/79977969 (CC BY-SA 4.0).
Need it done for your business? UphillTech.