Automattic / Automattic/jetpack

Purpose: Subscription Form Block submit button is misaligned with the email input field

Open
#20,804 4 comments 0 reactions 0 assignees View on GitHub
[Block] Subscribe [Pri] Low Customer Report [LEGACY] Enhancement
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.

![Markup on 2021-08-20 at 10:20:16](https://user-images.githubusercontent.com/14153300/130211609-e5ba19a0-f4d8-4325-bea6-8de995669d90.png)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.