diff --git a/plans/astro-refactor/task-15e-responsive-css.md b/plans/astro-refactor/task-15e-responsive-css.md index e2a8285..a29dd8e 100644 --- a/plans/astro-refactor/task-15e-responsive-css.md +++ b/plans/astro-refactor/task-15e-responsive-css.md @@ -196,3 +196,66 @@ diff <(grep -oh '(max\|min)-width:[0-9]*px' responsive.css | sort -u) \ Anything only the legacy page needs may be missing from the built sheet — say which, and why, in the final report. + +## Attempt 4 rejected: the ported rules are in the sheet and do nothing + +Tagged `rejected/15e-attempt-4` (`b6b6200`). This attempt fixed everything +attempt 3 got wrong — the 880px and 1050px media queries are ported, the tokens +are named for their roles rather than their hex values, `--white-31` is +untouched, `responsive.css` is unchanged and still linked by +`full-guide/index.html`, no `.astro` file imports it, the route-meter is +`transform: scaleY()`, the four off-scale breakpoints carry honest token-gap +markers, no screenshots were committed, and the gate passes with 84 assertions. +The acceptance test in this brief passes on it. + +**It is still wrong, and the acceptance test was the problem.** + +Astro scopes a component's styles. `WorktreeMap.astro`'s rules compile to +`.tree-node[data-astro-cid-lsutp3lb] { width: 180px }`, specificity 0,2,0. A +rule ported verbatim out of `responsive.css` arrives as +`@media (max-width: 1050px) { .tree-node { width: 145px } }`, specificity 0,1,0. +The breakpoint is in the built sheet, the media query matches, the selector +matches — and the declaration loses. At 1050px the node stays 180px wide. +Measured: + +``` +node .agents/scripts/computed-style-diff.mjs full-guide --widths 880,1050 +``` + +56 differences on attempt 4. Diffing breakpoints between `responsive.css` and +`dist/_astro/*.css` cannot see any of it, which is my error, not the agent's: I +wrote that test. + +**Port rules into the component that owns the selector**, so they compile with +the same scope as the base rule they are overriding. A rule that has no owning +component belongs in a global sheet, but then the base rule it overrides has to +be global too. + +### The baseline is not zero, and that is the real finding + +The same command reports **52 differences on `main`**, before this task changes +anything. `full-guide.astro` currently imports `responsive.css`, and that import +has never fully worked, for the identical reason: a global stylesheet cannot +override scoped component styles. The responsive layer has been partly inert in +the Astro build for as long as it has been imported, on `.tree-node`, `.branch`, +`.worker-card`, `.tree-stage`, `.tree-lab`, `.hero`, `.fleet`, `.chapter-links` +and more. + +So this task is not "keep parity". Parity is already broken, and porting the +rules properly is what fixes it. + +### Acceptance, restated again + +``` +node .agents/scripts/computed-style-diff.mjs full-guide +``` + +- Must report **fewer than 52** differences at 880px and 1050px — that is the + `main` baseline, and anything above it is a regression. +- Drive it to **zero** where you can. Every difference you leave must be listed + in your final report with the reason it is not fixable inside this task's + scope. +- Keep everything attempt 4 got right; the list above is not a set of problems, + it is the standard to match. +- The breakpoint diff against the built CSS stays as a _necessary_ check. It is + no longer a _sufficient_ one.