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-100 makes 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-100 does 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

Edited by Rajab Natshah

Merge request reports

Loading
Loading