Header: right-align EN|FR toggle in .hdr-in (top-right of page)

One CSS line: .lang-toggle{order:99;margin-left:auto}. Spec's literal order:99 alone
failed its own <=2px right-edge acceptance (gap 45.6-467.6px, 18/24 cases — order
reorders, .hdr-in is left-packed; geo-literal-order99.json), so margin-left:auto on
the toggle absorbs the free space; pill/logo untouched (spec-forbidden zone respected).

Battery: A1 gap=0px + rightmost + nothing-past-left in 24/24 (320/360/390/1280 x EN/FR
x intro/quiz/results); A2 header height unchanged 56/66px; A3 320px no overflow/wrap,
FR logo ellipsis intact, elementFromPoint hit-tests lang buttons + Start over pass;
A4 FR/EN clicks switch lang+title+aria-pressed; A5 24 screenshots before/after; A6
engine 36 + i18n 48 + smoke 92 + ps-pension 70 green; A7 desktop pixdiff header-strip-
only, 0 px below header at every device, self-jitter bit-identical; A8 DEPLOY-OK,
origin marker=1 + byte-identical CSS, off-LAN troublebox 200+marker+rule OFFLAN-OK.
This commit is contained in:
krisf committed 2026-10-09 13:32:40 -04:00
1 parent b209a19ae3
commit 043fa8a683
11 files changed
+20636

No files matched your search

+1
View File
@@ -25,6 +25,7 @@ b{color:var(--ink)}
.pill{font-size:12px;background:#e8f5ee;color:#0a5c36;border:1px solid #bfe6d0;border-radius:99px;padding:3px 10px;color:#0a5c36}
/* language toggle: compact EN|FR pill group; 44px touch targets (mobile pass rules) */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;flex:none;background:var(--card)}
.lang-toggle{order:99;margin-left:auto} /* right-align the EN|FR toggle inside .hdr-in (flex order=last visually; margin-left:auto absorbs the free space so it sits flush at the header's right padding edge — order alone leaves it left-packed next to Start over; other children stay left-packed untouched) */
.lang-btn{padding:4px 10px;border:0;background:transparent;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;min-height:44px;line-height:1.2}
.lang-btn[aria-pressed="true"]{background:var(--blue);color:#fff}
.logo{font-size:17px;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}