fix: #3622822 Match the email field height to the Subscribe button
Fixes #3622822.
What this changes
The email input kept the default .form-control height while the submit was sized by the theme button classes, so the two sat in one flex row at different sizes:
| email input | Subscribe button | |
|---|---|---|
| Desktop 1440px | 41px | 56px |
| Mobile 390px | 37px | 53px |
The input was also below the 44px minimum touch target on mobile.
Both controls now get the same explicit minimum height:
'#attributes':
class:
- w-100
- rounded-pill
- px-4
style: 'min-height:3.5rem'An earlier attempt used h-100 to stretch the input to the row height. That works on desktop, where the row is a flex row with align-items-stretch, but not on mobile, where the row becomes a column and the cross axis is width. An explicit height is correct at every width.
Why the page heading is not added here
An earlier revision of this MR also added a webform_markup header and footer to give the page a heading and some context. That was wrong on two counts and has been dropped.
Raw HTML in configuration is not how these pages are built, and more importantly this recipe ships to every Varbase site, so it cannot reference a theme's Single Directory Components. The only component library available is the active theme's own namespace, for example vartheme_bs5_horizonaid:heading; naming one here would break every site on a different theme.
The heading belongs where the components live. It is rendered from the route through the theme's own heading component in vartheme_bs5_horizonaid #3622823 and vartheme_bs5_educare #3622825, which also fixes every other webform page rather than this one form.
This MR is therefore limited to the one thing that genuinely belongs in shared config: the control sizing.
Verification
Anonymous, on a Horizon Aid site with the theme change also present:
- Email input and Subscribe button both 56px, top-aligned, at 1440px and at 390px, so both clear the 44px touch target.
- Exactly one
h1, rendered byvartheme_bs5_horizonaid:heading, confirmed via itsdata-component-id. - No HTML markup in this config at all: the form's only top level element is
subscribe. - Submitting records the subscription and the confirmation renders in the viewport.
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