Skip to content

fix(mobile): header overlay on real iOS + rep-card tag + mailto on iPhone

Scaffold Digital Fleet requested to merge mobile-fixes into risefor_main/master

Mobile fixes from Catalyst's real-iPhone testing (3 bugs + 1 polish)

1. Header overlaying the top of pages on real mobile — the important one

Symptom (iPhone 14): page titles on listing pages cut off, back buttons on detail pages invisible — the header paints over the top of the content.

Root cause (structural, engine-specific): orbit renders our header as a bare custom element directly inside main#content:

<main id="content" class="segment three-quarter sm-full text-top">   <!-- .segment = display:inline-block (orbit-styling-framework) -->
  <solid-risefor-header>…</solid-risefor-header>                     <!-- no display rule anywhere → INLINE host -->

The shell wrapper (div.notLoggedIn) also carries white-space: nowrap. So the header host is an inline box containing block children — a legacy layout corner where Blink blockifies cleanly but WebKit mis-sizes the inline host's box, so the header paints over content that starts at y=0.

This also explains why it only appeared with the #206 revamp: the old header was short with no background (small overlap invisible); the revamp gave it ~100px of solid mobile header that now visibly covers the title/back row.

Why desktop emulation never showed it: Blink handles inline-with-block-children fine — only real WebKit mis-sizes. (Confirmed: Catalyst sees it only on the actual phone.)

Fix (CSS-only, engine-proof): force block layout on the host from both sides —

  • :host { display: block } in src/scss/src/pages/ui/_header.scss
  • light-DOM solid-risefor-header { display: block } in src/scss/index.scss (RESET ORBIT section — orbit's own CSS stays untouched, per its commented-out state)

⚠️ Needs on-device verification (can't reproduce WebKit behavior from Linux/Chromium).

2. Representative listing: .list-tag broke the mobile card

position: static (from my C6 horizontal rep-card) landed the tag inside the 88px avatar header column — which is not a flex container, so align-self was a no-op: the tag wrapped over 2 lines and pushed the image far below the card body. Fix: hide .tag on mobile .sm cards (.risefor-card.sm .tag { display: none }), per Catalyst's suggestion.

3. iOS: "votre application par défault" does nothing (pre-existing bug)

window.open('mailto:…') is silently ignored by iOS WebKit for custom schemes (returns null, opens nothing — works on Android/desktop, which is why it survived). Bonus bug: encodeURI() on the whole mailto link left & inside subject/body unencoded, corrupting the parameters. Fix in contact-target-email.ts::_sendEmailApplication: per-part encoding (encodeURIComponent(String(...)) for subject/body) + on Apple devices navigate window.location.href = mailtoUrl (top-frame navigation triggers the native mail app / chooser). Android + desktop keep the working window.open path.

4. Mobile menu icon: classes="xl" → classes="sm" (Catalyst: XL was huge)

Verification

  • tsc --noEmit: zero new errors from this branch (stash-compare diff of per-file errors: identical except line shifts; one error fewer — unused import becomes used).
  • Served dev CSS confirmed: .risefor-card.sm .tag{display:none} live.
  • Sticky experiment reverted: no sticky header — menu-switch keeps its existing fixed position on mobile.

Prod test checklist for Catalyst (after merge)

  1. Real iPhone: listing pages — titles fully visible below header; back buttons visible on details.
  2. Real iPhone: action email form → "votre application par défault" → Mail app (or picker) opens.
  3. Rep listing on mobile: avatar sits properly beside content, no tag pushing image down.
  4. Desktop: confirm zero visual change (fix is mobile-rendering-path only).

Merge request reports