2021: mobile layout broken site-wide

[ritorhymes]

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