Automattic / Automattic/jetpack

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

Open
#34,812 4 comments 0 reactions 0 assignees View on GitHub
[Block] Paid Content [Feature] Earn Blocks [Feature] Paid Content [Platform] Atomic [Plugin] Jetpack [Pri] Normal [Status] Stale Bug Customer Report [LEGACY] Earn Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### 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;
}
}
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with a Classic theme such as Twenty Twenty-One, a Paid Content block, and a mobile viewport. Start by inspecting the styles for #memberships-modal-window.jetpack-memberships-modal and compare its mobile margins with desktop and FSE behavior. Done means the payment modal is centered or uses the full mobile viewport without breaking desktop layouts.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, wordpress
Domain
frontend, payments
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.