Round 2 mobile pass: CTA pinned above bottom sheet, swipe hint in chart header, anchor scroll-margin

- Issue 1: --sheet-h CSS var (live sheet height via syncSheetH: load/toggle/resize/
  panel-content), .scr clearance and sticky #btn-next/.step-nav above the sheet;
  income short step pixel-identical to round 1 (CTA top 485).
- Issue 2: chart() helper renders .chart-h (h3+p + .swipe span) into #g1-#g4;
  .chartbox::before overlay removed; hint is flex sibling in header, sticky left.
- Issue 3: [id]{scroll-margin-top:70px} so #whatif anchor lands below sticky hdr.
- G2 tick clip and Four-futures scroll documented as non-issues in report.
- verify2.py: 90/90 PASS live; before/after evidence in audit/mobile-{before,after}2/.

Spec: MOBILE-FIX-2.md. Report: MOBILE-FIX-2-REPORT.md.
This commit is contained in:
krisf committed 2026-10-09 06:44:08 -04:00
1 parent 53315e03e8
commit 1b194b6f92
37 files changed
+1007 -21

No files matched your search

+1 -11
View File
@@ -64,20 +64,10 @@
<div class="cards" id="gap-cards"></div>
<h3>Will it last? Projected savings</h3>
<p class="cap">Total portfolio (RRSP + TFSA + non-registered), in today's dollars. Shaded: money running out.</p>
<!-- Chart titles/captions render inside each card's .chart-h via app.js chart() (round 2 Fix 2) -->
<div id="g1" class="chartbox"></div>
<h3>Where retirement income comes from</h3>
<p class="cap">CPP, OAS, GIS and what you must withdraw from savings — stacked, after-tax view.</p>
<div id="g2" class="chartbox"></div>
<h3>Spending vs. what you'll actually have</h3>
<p class="cap">Annual cash in (income after tax &amp; clawback, plus withdrawals) vs. planned spending.</p>
<div id="g3" class="chartbox"></div>
<h3>Four futures, one number</h3>
<p class="cap">Sustainable annual spending that lasts to <span id="lifeexp-lbl">95</span> under each scenario.</p>
<div id="g4" class="chartbox"></div>
<p id="g4-note" class="cap"></p>