Header breaking page layout at 826-1000px breakpoints

[ritorhymes]

Summary

Between ~826–1000px viewport width, the desktop header layout (menu buttons, Download button, and social icons) no longer fits within the header container. This causes:

• Horizontal page overflow / scrollbar
• Header contents shrinking and/or compressing
• Page content shifting left with excess whitespace on the right
• Footer alignment breaking (most noticeable)

Safest fix: adjust the breakpoint so the desktop header contents are disabled at 1000px and the mobile navbar takes over.

Alternative (higher regression risk): selectively hide individual elements (e.g., Download button or social icons). This increases the chance of inconsistencies and overflow returning across different browsers / font rendering.

I have a PR live for the safer fix at #3484.

Testing

1. Open any page.
2. Resize the viewport to any width between 826–1000px.
3. Confirm horizontal overflow and the layout shifting left.
4. Check the footer; its right-side whitespace gap makes the issue easiest to spot.

Screenshots

Notice the page content is significantly offset to the left. If you look closely at the line separator under the header, it ends underneath the Download button when it should span the full page—this indicates the header is overflowing and forcing the layout to compress.

Notice the footer has excess whitespace on its right side (a visual symptom of the page being forced left due to header overflow in this breakpoint range).