Problem/Motivation
#3622822 gave the email input and the Subscribe button the same explicit minimum height, which fixed the mismatch on Horizon Aid. It does not fully fix it on a theme whose button computes taller than that floor.
Measured on Educare, at 1440px, with that change in place:
email input 56px (the min-height floor) Subscribe 58px (theme button padding)
A 2px mismatch rather than 15px, so much better than before, but the two controls still do not line up. The floor cannot fix this on its own: it is a minimum, and any theme whose button lands above it reopens the gap by exactly that difference.
Steps to reproduce
- Install a site on a theme whose button padding exceeds 3.5rem, for example Educare.
- Visit a page carrying the Newsletter Subscribe form.
- Measure the email input and the Subscribe button.
Proposed resolution
Add h-100 to the email input, alongside the minimum height:
'#attributes': class: - w-100 - h-100 - rounded-pill - px-4 style: 'min-height:3.5rem'
The two work together and each covers what the other cannot. On a wide screen the row is a flex row with align-items-stretch, so the wrapper is already stretched to the button height and h-100 makes the input fill it, whatever that height is. On a narrow screen the row becomes a column, the cross axis is width, and h-100 does nothing, so the minimum height keeps the input above the 44px touch target.
Using h-100 alone was tried first and rejected in #3622822 precisely because it fails on mobile. The floor alone is what this issue fixes.
Remaining tasks
- ✅ File an issue
- ✅ Addition/Change/Update/Fix
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support
- ➖ User Guide Documentation support
- ✅ UX/UI designer responsibilities
- ✅ Accessibility and Readability
- ❌ Reviewed by a human
- ❌ Code review by maintainers
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ✅ Update Release Notes
- ✅ Release varbase_webform_base-1.0.2
User interface changes
- The email input matches the Subscribe button height on any theme, not only where the button happens to equal the floor.
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- The Newsletter Subscribe email field now matches the Subscribe button height on every theme.
Issue fork varbase_webform_base-3622846
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #4
rajab natshahComment #6
rajab natshah