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[bot]]

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

https://github.com/Automattic/jetpack/assets/14153300/521a6768-8630-4145-8bc3-707ce260859a

📌 ACTIONS

• Triaged

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[ntsekouras]

I didn't test to reproduce but from the video shared above, it seems there is case when we show a subscribe button, but a user cannot actually subscribe. Should we look into that too and probably not render the button (or render something different) in such use case?