USWDS: Date Picker - Update month-label width for mobile

[amyleadem]

Description

Closes #4761

Preview link: Date picker component

Problem:

The date picker component can experience visual breaks with long month names like November and September when the window width is <320px. This problem is exacerbated by putting the field group in an error state, which adds another rem or so of left padding.

In real-life usage, this means that the date picker needs to support a width of about 224-256px.

Solution:

By setting the month label to be full width and ordering it so that it lives above the navigation buttons (rather than in-between) we no longer see these visual breaks in the calendar at mobile (<320px) widths.

Testing:

To test,

1. Open the date picker component and use devTools to reset the dimensions of the window to 224px, 319px, and 320px.
2. Check for line breaks in the month and year, especially with longer names like "September"

Solution screenshots:

224px:

319px:

320px:

224px with error state:

320px with error state:

Additional information

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[mahoneycm]

Looks and works great in my testing!

Should we consider adding some styling to the month/year selection menu to make it cleaner/easier to read? Or are they fine as is?

[amyleadem]

Should we consider adding some styling to the month/year selection menu to make it cleaner/easier to read?

@mahoneycm I added some styling to .usa-date-picker__calendar__month-picker for mobile (<320px) that stacks all of the months. I didn't change the years menu because it held up well enough at most narrow widths, and the cost was higher to change the formatting. I don't love the scroll height of the months dropdown, but it was the best I could do without changing the markup.

[thisisdano]

:chefs-kiss: