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

  1. Install a site on a theme whose button padding exceeds 3.5rem, for example Educare.
  2. Visit a page carrying the Newsletter Subscribe form.
  3. 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.
Command icon 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

rajab natshah created an issue. See original summary.

  • rajab natshah committed e3ab898e on 1.0.x
    fix: #3622846 Match the email field height on themes with taller buttons
    
rajab natshah’s picture

Issue summary: View changes
Status: Active » Fixed
Issue tags: +varbase-11.0, +varbase_webform_base-1.0.2

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue tags: -varbase-11.0

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.