Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LG-4792: Revise email languages layout to avoid text wrapping #5906

Merged
merged 2 commits into from
Feb 4, 2022

Conversation

aduth
Copy link
Contributor

@aduth aduth commented Feb 3, 2022

Why: As a user, I want all information to be displayed in a clear visual hierarchy without visual design issues, so that I am not distracted while I am signing in or verifying my identity.

State Device Before After
Default Desktop localhost_3000_sign_up_enter_email (3) localhost_3000_sign_up_enter_email (5)
Long Text Desktop localhost_3000_sign_up_enter_email (2) localhost_3000_sign_up_enter_email (1)
Default Mobile localhost_3000_sign_up_enter_email(iPhone XR) (3) localhost_3000_sign_up_enter_email(iPhone XR)
Long Text Mobile localhost_3000_sign_up_enter_email(iPhone XR) (2) localhost_3000_sign_up_enter_email(iPhone XR) (1)

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM but slightly disappointed "Spanish long long long" didn't make it into the diff :(

**Why**: As a user, I want all information to be displayed in a clear visual hierarchy without visual design issues, so that I am not distracted while I am signing in or verifying my identity.
@aduth aduth force-pushed the aduth-lg-4792-sign-up-email branch from 7967ec1 to 504b9f3 Compare February 3, 2022 20:35
Copy link
Contributor

@anniehirshman-gsa anniehirshman-gsa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM LGTM LGTM LGTM LGTM 😄

<% end %>
</ul>
</div>
<div class="grid-col-4 tablet:grid-col-6"></div>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For posterity: The reason to do it this way where the content column is assigned grid-col-fill and this column is given an explicit width is due to how the USWDS grid will assign flex-grow: 0; flex-shrink: 1 when using explicit widths. This allows the empty column to shrink and allows the grid-col-fill to occupy its space.

@aduth aduth merged commit b52be9c into main Feb 4, 2022
@aduth aduth deleted the aduth-lg-4792-sign-up-email branch February 4, 2022 16:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants