2021: mobile layout broken site-wide

Summary

On the 2021 site, the header title container .md-header__title--active, inside .md-header is causing horizontal page overflow that breaks page layouts site-wide at viewport widths of ≤ 959px.

This issue:

1. Creates a horizontal page scrollbar that disrupts normal scrolling and introduces unintended panning behaviors.
2. Hides the header when the user scrolls down despite being intended to always remain fixed to the top of the viewport and follow the user as they scroll.
3. Creates excess whitespace along the right side of the header and footer.

Note: When you zoom out on the page on mobile (which you shouldn't normally be able to do in the first place), the header will appear in view. The page normally loads without being fully zoomed out by default so the default behavior is that the header will disappear from view when scrolling.

I have tested and confirmed the issue is consistent on various major mobile browsers including Chrome, Edge, Firefox, and Opera. The issue on desktop browsers appears inconsistent: Chrome and Edge show the issue with browser dev tools opened but not when it's closed, Firefox doesn't show the issue at all.

I have a PR that fixes the issue at #885.

Screenshots

Taken on Chrome mobile, approximately 450px screen width

Homepage panned right
Notice the left side of the page is not visible and there's excess whitespace along the right side of the header

Homepage zoomed out
Notice the whitespace along the right side of the header

Homepage bottom
Notice the fixed header is missing at the top of the viewport and there is whitespace along the right side of the footer

About page zoomed out
Notice the excess whitespace to the right of the header, same as the homepage

Start by reproducing the layout at viewport widths of 959px or less and inspect .md-header__title--active inside .md-header. Review PR #885, which the issue identifies as the proposed fix. Done means the mobile pages have no horizontal overflow, the header remains fixed while scrolling, and the header and footer have no excess right-side whitespace.