Mobile fixes

[adborden]

Landing

• USA gov banner text overlaps
• footer links have no left margin
• search button on agency finder wraps

[adborden]

The usa banner issue looks like a wds bug uswds/uswds#2221

[vz3]

Mobile walkthrough with iPhone 7 Plus can be seen here (GSA-only link):
https://drive.google.com/open?id=1YB9m80ndicT30SUJfI4e-YuCi34r62Mw

Sidebar taking up majority of width of screen, resulting in form being too narrow.
Priority: High
Consider moving sidebar to something closer to glossary treatment: hide until activated. The form is not currently usable in this form. MVP: do not display sidebar in mobile.

More detail for potential (likely not enough time) solution:
Sidebar nav "Request directions" and "Agency information" button are full width, but hidden by default. Upon click, display relevant information at full width with an "X" to close or a click back on the same button to close.

Menu button doesn't look like a button
_Priority: Medium

(See image 1)
The outline treatment looks very close to a focus state. Consider applying #92C8F6 as background color to Menu button.

Menu close button 'X' has focus on click
Priority: Low-medium

(See image 2)
The dotted box around the menu on open makes the 'X' not look like a close button. Consider overriding focus treatment for mobile.

"Create a request" menu item is larger than other items
Priority: Low

(See image 2)
The "Create a request" menu item is larger than the other items. Consider making it the same size as everything else.

Return to top link is treated as a button
Priority: Low

(See image 3)
Return to top link has a blue outline which looks like the secondary button treatment. Consider removing this and treating as anchor tag. Buttons should be reserved for actions that result in actions that take users to another page (notable exception being home page hero). MVP would be to hide "return to top" links in mobile.

Update: It occurs to me that this is probably expected behavior for mobile because to improve touch area. But I think this visual treatment is too heavy handed for such a low-utility function.

Image 1

Image 2

Image 3

[adborden]

A few more to add when testing on my moto g4 in Brave (Chrome-ish)

• (med) glossary button is under the typeahead menu but on top of the search field. This is only an issue because when the agency finder has focus, the virtual keyboard pops up, pushing the glossary button right up to the text field. Maybe just hide the glossary button on mobile? Ideally, we would probably want to hide the glossary whenever an input has focus. The request form feels a bit distracting with it floating + keyboard
• (low) email field on request form is not an email type
• (low) hitting "next" on virtual keyboard from zip code in request form skips over country to request description
• No padding/margin on the confirmation page

[adborden]

• On iOS, all the menus are include in the print

https://gsa-tts.slack.com/files/U029LNZE8/F7X03R5U0/image_uploaded_from_ios.jpg

[leahbannon]

I captured the unchecked items in separate issues #423 #424 #425