fix(mobile): sticky header, remove horizontal scrollbar, contain overflow - #181

Mobile: sticky header + no horizontal scroll

Preview (deploys from my fork): https://dg-bio.vercel.app/en-us/

The problem

On mobile viewports the site had three related layout bugs:

1. Header did not stick. header.nav has position: sticky; top: 0, but scrolling the page caused it to slide off with the content.
2. Horizontal rubber-band scroll. A faint horizontal scrollbar appeared at the bottom on small screens.
3. .scroll-top "back to top" button was clipped off-screen on the right, and the "DigiByte Technical Architecture (White Paper)" ghost button overflowed the viewport.

Root cause

All three symptoms trace back to two lines in css/base.css:

html, body { height: 100%; }
body { … overflow-x: hidden; … }

• body { overflow-x: hidden } forces overflow-y to auto on the same element (per the CSS overflow shorthand rule), which turns <body> into a scroll container. Combined with body { height: 100% }, <body> becomes a fixed-height scroll port and the sticky header sticks inside body rather than to the viewport — so it scrolls away with the page.
• Decorative overflow (e.g. .hero__art-ring--2 on the DigiDollar section uses inset: -25%) pushed the body's rendered width past the viewport. That extended the layout viewport used by position: fixed, which is why .scroll-top (right: 16px) landed ~25 px off-screen on a 390 px viewport.
• The .btn primitive globally sets white-space: nowrap, so the long white-paper link couldn't wrap on narrow screens.

The fix

Three small, self-contained CSS changes (no HTML/JS touched):

overflow-x: clip (vs. hidden) prevents the horizontal scrollbar without creating a scroll container, so position: sticky keeps working.

Verification

On a 390 × 844 mobile viewport of the preview build:

• document.documentElement.scrollWidth === clientWidth → no horizontal scroll.
• window.scrollTo(100, 0) leaves scrollX === 0.
• .nav.getBoundingClientRect().top === 0 at every scroll offset past the ticker.
• .scroll-top sits at right: 16px inside the viewport again.

Screenshots (390 × 844, en-us)

Hero + sticky nav landing:

Sticky nav pinned mid-scroll with .scroll-top correctly placed:

Long ghost button now wraps to multiple lines inside the viewport:

Notes

• Zero HTML/JS changes; per-locale index.html files are untouched.
• No visual regression on desktop: the added overflow-x: clip on section matches the intended behavior on wider viewports where the decorative rings already fit inside their grid cells.
• overflow-x: clip is supported in all current evergreen browsers (Chrome/Edge 90+, Firefox 81+, Safari 16+); if it's unsupported the fallback is exactly today's behavior (the scrollbar reappears; nothing else regresses).