Responsive optimization for site search and utility nav list (glossary/calendar)

[johnnyporkchops]

Summary

What we're after:

• The links to Calendar and Glossary in the header should be available in mobile view.
• The global site searchbox adjacent to these links should stay visible regardless of screen size instead of appending it to the mobile menu.
• CSS Flexbox or Grid might be a good way to control positioning and visual stacking between desktop and mobile regardless of source-order in the html.
• We should consider making the site search field or his whole area (utility-nav list--flat) an html partial that can be included in both Jinja and Django templates which should be possible given that they don't contain expressions specific to either template engine

Related issues

List any relevant related issue(s)

• ARIA/accessibility fixes for mobile menu and search/typeahead #4456

Completion criteria

• The site search field, the glossary link and the calendar links all persist in the header on any screen/device size and upon manually resizing the screen between desktop and mobile.
• They are accessible

Tech steps or considerations (optional)

List any considerations the tech team should know. Additionally, any specific tech steps can be included here.

• Consider whether making the items into a single partial include will not hinder future development given that it would not be able to contain Django-specific or Jinja-specific syntax
• Pay attention to accessibility of these items and tabbing order
• Should we use Flexbox or Grid?

Future work