fix: header reflows under enlarged text; reopen the step-1 nowrap decision
The step-1 header decision is formally reopened (AGENTS.md (ak)): its record attributed the residual to the wrong cause and read a measured 944px functional failure as a robustness margin. Mechanism — wrapping, plus a gated sticky offset: - `flex-wrap: nowrap` removed from `.header-inner` (measured necessary AND sufficient) and from `.nav-list` (measured inert; removed so the prohibition is not contradicted by a `nowrap` in the same file), with a dead `flex: none`. - `inset-block-start` becomes a two-band, two-term saturating clamp() so the header is sticky only while the masthead is one row. A media query cannot express this: its `rem` resolves against the browser DEFAULT font size, a property's against the root element. The second term catches a root BELOW the default, where the 80rem content cap shrinks faster than the header's px minimums; without it 65px of `#main` sat behind the header at 9px. - Wrapping is the only mechanism that reflows under all THREE enlargement paths, because Chrome's minimum-font-size setting is invisible to @media, to @container and to every length unit. Measured, 22 pages x 16 widths = 352 page-widths per method: root-style 32px 175/352 -> 0/352 (1280px: 944px overflow -> 0) minimum-font-size 32 219/352 -> 88/352 (residual is the footer email) default-font-size 32 0/352 -> 0/352 default (root 16) 0/352 -> 0/352 Nav items and CTA on-screen in 1408/1408. A further 762 points across roots 9-32, both thresholds, the band seam and all five Chrome presets: 0 failing. Normal-settings identity: 0 differences on 352 page-widths across six metrics, with six nav items and with a seventh injected. Header 81.00px at all eight widths >= 1056, CTA gap 0.00px. Lighthouse: 22 pages, no category below 95, CLS 0.000 on every page. --header-h is reworded as a FLOOR, not a constant; value unchanged. Also in this step, per ruling: - /bio/ print `font-weight` frozen at 400 — the circulated PDF's typography changes only when its content is deliberately revised, never as a side effect of a screen refactor. Declaration byte-identical; the constraint is recorded. - CLAUDE.md: the two-simulation rule for enlarged text, the zsh no-word-splitting rule, the third (minimum-font-size) mechanism, and "state the grid with the count". Two rounds of adversarial-reviewer, eleven findings, all resolved; round 2's blocking finding was a defect in round 1's own fix. Two suggested fixes declined with reasons in (ak). claims-auditor deliberately not run — D20. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Md3GndFqWPzK78xAoebsg5
This commit is contained in:
co-authored by
Claude Opus 5
parent
0f7595b602
commit
fce89d46eb
+69
-15
@@ -534,21 +534,75 @@ Then invalidate `/*`.
|
||||
- [ ] Favicon set complete
|
||||
- [ ] Tested on iOS Safari, Android Chrome, desktop Safari/Chrome/Firefox
|
||||
- [ ] Tested at 320 px and at 200% zoom
|
||||
- [ ] ⚠️ **THE 200%-DEFAULT-TEXT RESIDUAL AT 1280 px AND 1920 px IS RULED ON,
|
||||
EITHER WAY. BLOCKING, AND IT IS A DECISION RATHER THAN A TASK.** With
|
||||
`documentElement.style.fontSize = '32px'` the site is over by **944 px on 21
|
||||
pages and 508 px on `/` at 1280 px**, and **304 px on 21 pages at 1920 px**
|
||||
— and it is not a scroll margin: the nav clips mid-word and **Practice, Fees,
|
||||
Contact and the header CTA are entirely off-screen — including the route to
|
||||
the inquiry form**, WCAG 1.4.4 with loss of functionality. The cause is `flex-wrap: nowrap` on `.nav-list` above
|
||||
66 rem, a **locked step-1 header decision**, so no fix was improvised — see
|
||||
`docs/02` §Reflow for the measurement, the two non-equivalent ways of
|
||||
simulating 200% text, and the two candidate fixes. **This item is ticked by
|
||||
Pouya either fixing it or recording it as knowingly accepted with the
|
||||
measured consequence — not by re-measuring it with the method that reports
|
||||
zero.** The narrow widths (320/360/390/414/640/1024) are fixed and are 0.
|
||||
Raised by `adversarial-reviewer`, 2026-08-31, against a record that had
|
||||
declared the whole thing fixed
|
||||
- [x] ✅ **THE 200%-TEXT NAV OVERFLOW IS FIXED, 2026-09-01 — THIS ITEM IS
|
||||
DISCHARGED.** Pouya reopened the step-1 header decision and ruled *fix, do
|
||||
not accept*. `flex-wrap: nowrap` is gone from `.header-inner` (the necessary
|
||||
and sufficient one, measured) and from `.nav-list`, and the masthead is
|
||||
sticky only while it is one row — a saturating `clamp()` gate in two bands,
|
||||
66 rem and 76 rem. Measured across 22 pages × 16 widths, before and after on
|
||||
the same grid: **root-style 32 px went from 175 of 352 page-widths over to
|
||||
0**; minimum font size from 219 to 88, all of the remainder being the footer;
|
||||
default font size stays 0. Nav items and CTA on-screen in **1408 of 1408**
|
||||
measurements. The shipped rendering at the default size is
|
||||
**geometry-identical — 0 differences on 352 page-widths**, header 81.00 px,
|
||||
CTA on the content edge, with six nav items and with a seventh.
|
||||
⚠️ **AND IT WAS VERIFIED ACROSS THE INTERMEDIATE ROOT SIZES, WHICH IS WHAT
|
||||
ROUND 1 DID NOT DO.** WCAG 1.4.4 is a requirement up TO 200 %, not AT 200 %:
|
||||
round 1 sampled root 16 and root 32 only, both clean, and shipped a gate that
|
||||
left `#main` behind the header at **20 of 300** grid points across roots
|
||||
18–30. **And round 2 found the gate was one-sided**: Chrome's "Font size" has
|
||||
five presets (9 / 12 / 16 / 20 / 24 px) and only 16 had been swept, so at
|
||||
**9 px the masthead wrapped for the opposite reason** — the `80rem` content
|
||||
cap shrinks while the header's px minimums do not — leaving **65 px of `#main`
|
||||
behind the header** on 21 of 22 pages at every width. A second gate term
|
||||
(`1rem - 16px`) closes it, and closes a **pre-existing 12 px** shortfall on
|
||||
all 22 pages at that setting as well. Now **0 failing across 762 points**:
|
||||
roots 9–15 (70), roots 16–32 (300), the band seam (198), both thresholds
|
||||
(144) and all five default-font-size presets (50). Both findings by
|
||||
`adversarial-reviewer`; `docs/02` §Reflow carries all of it
|
||||
- [ ] ⚠️ **TWO REFLOW RESIDUALS SURVIVE, BOTH UNDER CHROME'S MINIMUM-FONT-SIZE
|
||||
SETTING ONLY, AND BOTH NEED A RULING RATHER THAN A RE-MEASUREMENT.**
|
||||
*(a) The footer, and it is OUT OF the scope Pouya set for the header step.*
|
||||
Document overflow of **14 px at 320, 38 px at 1024, 30 px at 1056 and 19 px
|
||||
at 1100 CSS px**, on all 22 pages, 0 from 1200 px up. Cause:
|
||||
`info@smlcompany.ca` has no break opportunity and needs 310 px inside a
|
||||
224–243 px footer-contact column; at 320 px the `.footer-col` box itself is
|
||||
310 px in a 272 px content area. **Pre-existing: the footer's OWN overflow is
|
||||
byte-identical before and after** (`div.footer-grid` 78 px at 1056, 67 px at
|
||||
1100). The 1056/1100 *document* figures did change, 414 → 30 and 370 → 19,
|
||||
because the header stopped contributing its own — a document figure and a
|
||||
footer contribution are different measurements.
|
||||
*(b) The skip link, and it CANNOT be fixed in CSS.* The header stays sticky
|
||||
at **164.58–270.56 px** under that setting, so "Skip to content" lands with
|
||||
**68–174 px of `#main` behind the header** on 22 of 22 pages from 1056 px
|
||||
up — it was 10–26 px before, so the header fix widened it, deliberately, to
|
||||
buy the removal of 830 px of horizontal overflow with four nav items and the
|
||||
CTA unreachable. **Nothing in CSS can detect that mechanism**: media queries,
|
||||
container queries AND length units all keep resolving `rem`/`em` at 16 px
|
||||
while `getComputedStyle` reports 32 px (measured; `docs/02` §Reflow). The
|
||||
remaining candidates are a fitted constant tied to the nav item count, or a
|
||||
behaviour change at normal settings. **Ticked by Pouya fixing (a) and ruling
|
||||
on (b) — not by re-measuring with a method that reports zero**
|
||||
|
||||
- [ ] ⚠️ **THE SEVENTH NAV ITEM PLUS FALLBACK FONT METRICS — A LAYOUT SHIFT *AND*
|
||||
A SKIP-LINK FAILURE, AT THE DEFAULT TEXT SIZE, ARMING ITSELF WHEN THE SECOND
|
||||
INSIGHTS ARTICLE PUBLISHES.** No reader setting is involved: with every
|
||||
`.woff2` blocked — what a reader on the Slow 4G profile `docs/04` budgets
|
||||
against sees first, since the fonts are `font-display: swap` — and a seventh
|
||||
nav item present, the header measures **141 px at every width from 1056 to
|
||||
1091 px** (a contiguous **36 px** band) and 81 px from 1092 px up; with the
|
||||
webfonts loaded it is 81 px throughout. Two consequences: **(i)** a **60 px
|
||||
collapse** when Geist swaps in, on all 22 pages, against the CLS < 0.05
|
||||
budget — *larger, not new*, since the previous build shifts ~5.6 px in the
|
||||
same band; and **(ii) 44 px of `#main` behind the sticky header** after "Skip
|
||||
to content", because 141 px exceeds the 97 px `scroll-padding-top` — **this
|
||||
half IS new**, the previous build's 86.97 px stayed under 97 px and covered 0.
|
||||
**Latent, not shipped:** six items never wrap, and `showInsights` turns the
|
||||
seventh on at two published articles. Two candidate fixes, both Pouya's call
|
||||
because both are outside "the header and its consumers": raise the desktop
|
||||
breakpoint past 1091 px, which changes the normal-settings layout in that
|
||||
band, or give Geist a metric-matched `size-adjust` fallback. Raised by
|
||||
`adversarial-reviewer`, 2026-09-01; `docs/02` §Reflow carries the measurements
|
||||
|
||||
**Infrastructure**
|
||||
- [ ] S3 versioning enabled
|
||||
|
||||
Reference in New Issue
Block a user