Mobile Header Safezone Tests

Yola injects a mobile header (estimated height: 60px) containing the hamburger menu.
First page content must not overlap it.

IMPLEMENTATION: Add class yola-safezone to the first content element.
This applies padding-top: 60px on screens ≤600px and 0 on desktop.
VERIFY: Open page on phone. Yola hamburger icon should be fully visible and tappable.

Fast-scroll sidebar (position:fixed, right:0.75rem) is hidden on screens ≤600px.
Verified in all 7 AIO staging pages via @media(max-width:600px) { display:none }.
This test file: sidebar is VISIBLE on desktop. Resize to mobile to confirm it disappears.

Sticky bars use top: 0 on desktop.
On mobile, they must use top: var(--yola-header-h) (60px) to clear Yola's header.
VERIFY: On mobile, scroll down. The sticky nav bar should appear BELOW the Yola hamburger bar, not overlapping it.
FALLBACK: If Yola's header is position:static (not fixed), the sticky offset may not be needed. Test both states.

When a fixed bottom nav bar is present, body must have padding-bottom
equal to the bar height to prevent content clipping.
iOS also adds env(safe-area-inset-bottom) for the home indicator.
Formula: padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px) + extra)
VERIFY: On iOS Safari, scroll to bottom. Last paragraph fully readable above mobile bar.

Titles must wrap gracefully. Test cases below:

The Last Man Singing

Smirks, Swears, Moans and Cries at the End of a Very Long Night in a Very Small Town

Collaborhythm-CollabORhythm-Collabtunes-TheModernAmericanSongbookProjectExtended

Rules applied: word-break:break-word; overflow-wrap:break-word; hyphens:auto; max-width:100%
Font size: 2.2rem desktop → 1.6rem ≤600px → 1.3rem ≤380px.

Rule: .safe-badge-row { display:flex; flex-wrap:wrap; gap:0.6rem; }
Individual badges use white-space:nowrap so badge TEXT doesn't break,
but the row wraps to the next line when width is exceeded.

Meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
CSS: padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
Fixed bars: bottom: env(safe-area-inset-bottom, 0);
VERIFY: On iPhone with notch/Dynamic Island, no content clipped by cutout.

iOS HIG and WCAG 2.5.5 recommend minimum 44×44px touch targets.
Applied to: mobile bottom bar buttons, sticky top bar items.
NOT applied to: fast-scroll sidebar (hidden on mobile — sidebar is desktop-only).
Back buttons and nav buttons use min-height:44px on mobile.

Both buttons above are at least 44px tall — tap-friendly on all devices.

⚠ Never go below 0.55rem. At 0.55rem, only use for 2–3 character labels (Top, ID, etc.).
All sizes above are declared in rem — they scale with browser zoom and accessibility settings.

Horizontally scrollable containers (sticky top bar, mobile bottom bar) use:
overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
This gives iOS momentum scrolling and prevents triggering page scroll while swiping inside.