Investigate: Login.gov logo vertical spacing and fix

[machikoyasuda]

What is the visual bug and the ideal design

Ideal: The Login.gov logo on the radio button options on the Eligibility pages that opens the modal should not change paragraph line-height.

Current: The Login.gov logo makes the line-height a little taller.

Screenshots:

https://test-benefits.calitp.org/eligibility/

Scenarios to test

• Test with and without focus rings
• Test in Spanish and English
• Test on all screen widths

Issue details

• The goal of this issue is to investigate the reason and see if it's possible to get the sentence line-height to be equal, without affecting the alignment of the logo and the question mark icon.

• Preliminary debugging: Toggling the display: none / block of the entire parent div is helpful to see the line-height difference:

• Possible solution: Turning off this rule: margin: 11px auto 0 auto on .login .fallback-text leads to this: And turning off line-height: 1 on .login also seems to help reduce the extra line-height.