Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

amyleadem
Copy link
Contributor

@amyleadem amyleadem commented Jul 11, 2023

Summary

Updated memorable date styles to allow elements to wrap to multiple lines at narrow browser widths.

Breaking change

This is not a breaking change.

Related issue

Closes #5135

Related pull requests

Changelog PR

Preview link

Preview link: Memorable date component

Problem statement

The memorable date fields get visibly cut off at screen widths less than ~430px or when using screen magnification.

image

Solution

Allowing the memorable date fields to wrap to multiple lines will let users access all elements of the component at narrow screen widths and when using screen magnification.

Testing and review

  • Confirm that all elements of the memorable date component are visible at screen widths <400px
  • Confirm that all elements of the memorable date component are visible when using screen magnification
  • Confirm that the component is still intuitive and usable when broken into multiple lines.

@amyleadem amyleadem marked this pull request as ready for review July 11, 2023 17:38
@amyleadem amyleadem requested a review from mejiaj July 11, 2023 17:38
@amyleadem amyleadem assigned mahoneycm and unassigned mahoneycm Jul 11, 2023
@amyleadem amyleadem requested a review from mahoneycm July 11, 2023 17:39
Copy link
Contributor

@mahoneycm mahoneycm left a comment

Choose a reason for hiding this comment

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

Simple and effective fix! Maybe down the line, we can enhance the mobile styles by having the day and year split the width of the screen

@amyleadem
Copy link
Contributor Author

Thanks for the suggestion, @mahoneycm. I've opened issue #5380 to improve the presentation at narrow screen widths.

Copy link
Contributor

@thisisdano thisisdano left a comment

Choose a reason for hiding this comment

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

Nice and simple!

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.

USWDS - Bug: Memorable date component breaks the layout on very narrow screens

4 participants