[BUG] Public share page scrolls 60px sideways on a phone (header decoration is never clipped)

What happens

The public share page carries 60px of horizontal scroll on a phone: document.documentElement.scrollWidth is 450 in a 390-wide viewport, so every visitor can drag the page sideways.

Why

The header's two decorative circles sit outside the header box on purpose (SharedTripPage.tsx):

<div className="text-white" style={{ ... position: 'relative' }}>   // line ~205, no overflow
  <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, ... }} />  // line ~224
  <div style={{ position: 'absolute', bottom: -40, left: -40, width: 150, height: 150, ... }} /> // line ~228

Nothing in the ancestor chain establishes a clip, so the first circle adds 60px to the document's scroll width: 390 + 60 = the 450 measured. (The map's GL canvas is oversized too, but the map card already has overflow: hidden, so it is not this.)

Suggested fix

overflow: 'hidden' on the header element — which is what bleeding a decoration past its own edge always meant.

Environment: current main, Chromium at a 390x844 viewport, iPhone 13 device profile.