Automattic / Automattic/jetpack
Purpose: Subscription Form Block submit button is misaligned with the email input field
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Steps to Reproduce
1. Apply the Purpose theme to the site
2. Add a Subscription Block
### What I expected to happen
The Submit Button should be correctly aligned with the input field, either displaying on the same line, or below it.
### What actually happened
The Submit button displays with a weird alignment.

### Context
Customer report #4234458-zen
### Operating System
macOS
### OS Version
11.15.1
### Browser
Chrome/Chromium
### Browser Version(s)
92
### Is this specific to applied theme? If so, what is the theme name?
Purpose
### Simple/Atomic
Simple, Atomic
### Console and/or error logs
_No response_
### Number of Users Impacted
All users
### Available Workarounds
Provided this CSS, but there might be a better way:
```
@media screen and (min-width: 768px) {
#subscribe-submit button {
margin-top: auto;
}}
```
### Reproducibility
Consistent
### Other information
_No response_
Contributor guide
Research direction
Reproduce the issue by applying the Purpose theme and adding a Subscription Block, checking the layout at the desktop breakpoint described by the workaround. The work is done when the submit button aligns with the email input, either on the same line or clearly below it, without the reported misalignment.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100