A media query can sit in the built stylesheet, match the viewport, and do
nothing. Astro scopes a component's rules as
`.tree-node[data-astro-cid-lsutp3lb]`, specificity 0,2,0. A responsive
rule that arrives unscoped as `.tree-node`, 0,1,0, loses to it. The
breakpoint is present, the selector matches, the declaration never wins.
Task 15e attempt 4 shipped exactly that: `@media (max-width: 1050px)
.tree-node { width: 145px }` is in dist and the node stays 180px. The
acceptance test I had written for that task -- diff the breakpoints in
responsive.css against the breakpoints in the built CSS -- passes on it.
Checking that a value appears in a stylesheet cannot catch this; only
asking the browser what it computed can.
This walks both pages at a list of widths and compares computed styles
for every element matching the classes the legacy responsive layer moves
at a breakpoint.
node .agents/scripts/computed-style-diff.mjs full-guide
node .agents/scripts/computed-style-diff.mjs full-guide --widths 880,1050
It reports 52 differences on main at 880px and 1050px, before task 15e
changes anything: importing responsive.css into an Astro page never fully
worked, for the same specificity reason. The responsive layer has been
partly inert in the build for as long as it has been imported.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Marcos Paulo