fix: #3622846 Match the email field height on themes with taller buttons
Fixes #3622846.
What this changes
#3622822 gave the email input and the Subscribe button the same explicit minimum height. That lines them up on Horizon Aid. It does not line them up on a theme whose button computes taller than the floor, because a floor is a minimum: any button above it reopens the gap by exactly that difference.
Measured on Educare at 1440px, with #3622822 in place:
| height | |
|---|---|
| email input | 56px (the floor) |
| Subscribe | 58px (theme button padding) |
One line fixes it:
'#attributes':
class:
- w-100
- h-100
- rounded-pill
- px-4
style: 'min-height:3.5rem'Why both, and not one or the other
They cover different cases, and neither is sufficient alone.
- Wide screen: the row is a flex row with
align-items-stretch, so the email wrapper is already stretched to the button's height.h-100makes the input fill it, whatever that height turns out to be. - Narrow screen: the row becomes a column, the cross axis is width, and
h-100does nothing. The minimum height is what keeps the input above the 44px touch target.
h-100 alone was tried first in #3622822 and rejected for exactly that reason. This adds it back alongside the floor rather than instead of it.
Verification
Measured in a browser, anonymously, with both present:
| Site | 1440px | 390px |
|---|---|---|
| Educare | 58 / 58 | 56 / 56 |
| Horizon Aid | 56 / 56 | 56 / 56 |
Top-aligned in every case, and no regression on Horizon Aid, where the floor already matched.
Checkpoints:
- File an issue
- Addition/Change/Update/Fix
- Testing to ensure no regression
- Automated unit testing coverage
- Automated functional testing coverage
- UX/UI designer responsibilities
- Readability
- Accessibility
- Performance
- Security
- Developer Documentation
- User Guide Documentation
- Reviewed by human
- Code review by maintainers
- Full testing and approval
- Credit contributors
- Review with the product owner
- Release notes snippet
- Release
AI-Generated: Yes