# Mobile Header Safezone Tests

COLLABTUNES_MOBILE_HEADER_SAFEZONE_TESTS_5_13_26.html — 10 tests

TEST-01 — Yola Hamburger Clearance Requires Browser Verification

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

0–60px — YOLA HEADER TERRITORY. No fixed/sticky elements here on mobile.
60–100px — caution zone. First visible page content should start here on mobile.
100px+ — safe. All content, sticky bars (with offset), fast-scroll.

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.

TEST-02 — Fast Scroll Sidebar Mobile Hide CSS Rule Verified

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.

TEST-03 — Sticky Top Bar Behavior Requires Browser Verification

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.

TEST-04 — Fixed Bottom Bar + Content Padding Requires Browser Verification

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.

TEST-05 — Long Title Wrapping CSS Rule Applied

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.

TEST-06 — Badge Row Wrapping CSS Rule Applied
PG-13 GX — 21 Song List 1 of 10 Collaborhythm V1 Staging Source Pull Required

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.

TEST-07 — Viewport Fit Cover (iOS Notch / Dynamic Island) Meta Tag + CSS Applied

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.

TEST-08 — Touch Target Minimums (44×44px) Requires Device Verification

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.

← SW ↑ Top

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

TEST-09 — Font Readability at Mobile Sizes Scale Documented
0.55rem (8.8px) — MINIMUM — scroll buttons only (Top, ID, etc.) ← 2–3 chars max
0.58rem (9.3px) — short labels, metadata tags, content flags
0.60rem (9.6px) — block labels, breadcrumbs, social bar links
0.62rem (9.9px) — badges, back buttons, pending text ← standard label size
0.65rem (10.4px) — rating badges, track numbers, canon text
0.97rem (15.5px) — body text, track titles ← main readable size
1.15rem (18.4px) — block headings
2.2rem — page title (desktop)

⚠ 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.

TEST-10 — Scroll Momentum (Inner Containers) CSS Rule Applied

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.

Scroll → Top Identity Tracks Context Canon Status ← Switchboard (this scrolls sideways on mobile)

PRE-DEPLOY MOBILE CHECKLIST (human QA required)

[ ] Yola hamburger icon fully visible and tappable on mobile

[ ] Fast-scroll sidebar hidden on phone (not overlapping content)

[ ] Sticky top bar sits BELOW Yola header, not overlapping it

[ ] Bottom content visible above mobile bottom bar

[ ] Long collection titles wrap without horizontal scroll

[ ] Badge rows wrap to new lines without overflow

[ ] iPhone notch/Dynamic Island: no content clipped

[ ] All nav buttons feel tappable (fat enough touch targets)

[ ] No text smaller than ~9px visible

[ ] Horizontal swipe inside scrollable bars has momentum

[ ] No horizontal page scroll at any viewport width

[ ] Rotate device to landscape: layout still intact