Paid Content block payment modal is not centered on mobile for Classic themes

[mgozdis]

Impacted plugin

Jetpack

Quick summary

On Classic themes such as Twenty Twenty-One, Dara, Astra, etc. the payments block modal is not centered on mobile. See video:
https://github.com/Automattic/jetpack/assets/121042930/fd84682c-7ca1-41fc-8c8c-5c58d83b4f3a

User reported this issue with Astra and I mistakenly identified as a theme conflict while being unable to reproduce the issue with a default FSE theme. The issue does not appear to affect FSE themes, however, I later was able to reproduce with default Classic themes after Astra's support replied back to the user.
User report: 7483714-zd-a8c

Steps to reproduce

1. Activate a Classic theme such as Twenty Twenty-One
2. Add a Paid Content block to a page with a subscription (assuming you have Stripe connected already)
3. Publish the page
4. On mobile or mobile screen size, click the Subscribe payment button to see modal is not centered

A clear and concise description of what you expected to happen.

Modal should be centered on mobile similar to desktop or use 100% width of screen.

What actually happened

Modal is not centered due to margins being set to 0.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

CSS workaround similar to the following can be applied so that it appears centered on mobile.

@media only screen and (max-width: 600px) {
   body #memberships-modal-window.jetpack-memberships-modal {
      margin:20px!important;
   }
}

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 7483714-zen

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

Reproduced, the modal is aligned to the left

CleanShot.2024-01-03.at.16.36.26.mp4

📌 ACTIONS

• Triaged