fix(rendering): harden responsive layouts #57

Merged

clawlter merged 3 commits from fix/visual-rendering-audit into main

2026-07-19 22:17:43 -04:00

clawlter commented

2026-07-19 16:13:42 -04:00

Owner

Summary

prevent display-heading glyph ink from colliding across wrapped lines
reflow navigation, Work, Principles, Notes, article, and footer layouts before constrained widths become unreadable
keep sticky section/outline content below the header and within short viewports
preserve rotated Notes card edges and add rendering regressions for the confirmed failures

Confirmed defects fixed

390px routes overflowed by 90px at 150% text because the body minimum width scaled with the root font size
desktop navigation and Notes results escaped the viewport at 1024px/200% text
major display headings used line boxes shorter than the loaded font's painted glyph height
the homepage sticky trailhead heading pinned underneath the sticky header
footer identity collapsed to 0–97px between 593px and 760px
the rotated Notes lead card was clipped by its header container
long article outlines could exceed the usable sticky viewport

Verification

npm run validate
deployment-equivalent npm run smoke:site -- http://127.0.0.1:4322 'iPhone 12' — 12 routes, status OK
responsive visual matrix: 11 routes × 8 widths = 88 pages, zero viewport escapes and zero page errors
same 88-page matrix with reduced motion, zero viewport escapes and zero page errors
failed-webfont audit: 10 route/viewport samples, zero overflow or cramped headings
open-state audit: mobile menu and expanded Notes filters at 320px/1024px, zero geometry or stacking failures
compact-navigation resize boundary: remains open through 1024px and closes at 1025px desktop transition
independent pre-fix implementation audit and post-fix visual/code reviews

Intentionally retained

Decorative off-canvas shapes, rotated card stacking, and the mascot caption's layered frame treatment remain where they do not obscure text or controls.

Follow-up rendering regressions

A second independent pass found two boundary failures that the original checks missed:

the Work image caption collided with its copy card at 768px;
Work, Principles, and Notes overflowed at 1025px/200% text, with Principles also overflowing at 1280px/200% text.

The follow-up commit removes the caption's negative tablet offset, permits emergency display-heading wrapping, makes Notes grid tracks shrinkable, stacks constrained Notes rows by container width, and keeps the enlarged Notes lead card content inside its clipped paper surface.

Additional regression coverage now exercises 1025px and 1280px at 200% text, visible header-control separation, Notes lead-card clipping, and the 768px Work caption/copy geometry.

Final local verification on head bf29e6f:

npm run validate
deployment-equivalent 12-route smoke suite
normal-motion and reduced-motion matrices: 11 routes × 8 widths = 88 pages each, zero viewport escapes and zero page errors
fallback-font audit: 10 samples, zero failures
open-state audit: 4 samples, zero failures
manual follow-up screenshots at 768px and the four enlarged-text failure cases

Final independent review corrections

Independent review of the follow-up found three issues before merge:

the Notes lead-card clipping assertion ignored child offsets within the clipped parent;
the PUBLIC AGENT descriptor overlapped Home at 1025px/200% text;
global emergency wrapping split normal homepage hero words at 1440px.

Commit 0770a22 corrects the geometry assertions, hides the optional descriptor only across the desktop transition band, restores normal balanced wrapping globally, and limits emergency wrapping to the constrained Work and Principles headings that require it. It also adds a rendered character-line regression check against normal mid-word heading breaks.

The corrected head again passes the full validation, canonical smoke suite, normal/reduced 88-page matrices, fallback-font audit, open-state audit, and direct visual checks of every reported screenshot.

Final review disposition

Independent code re-review passed commit 0770a22 with no findings.

The final visual reviewer reported a blank Chamblee booklet image in two reduced-motion audit screenshots. Live probing showed the production image had a valid currentSrc, complete=true, and nonzero natural dimensions at both 320px and 1024px before scrolling. The temporary full-page audit harness was capturing before the async-decoding image painted. After making the harness await HTMLImageElement.decode(), the complete 88-page reduced-motion matrix remained geometrically clean and both regenerated screenshots visibly contained the booklet artwork. No production-code change was required.

## Summary - prevent display-heading glyph ink from colliding across wrapped lines - reflow navigation, Work, Principles, Notes, article, and footer layouts before constrained widths become unreadable - keep sticky section/outline content below the header and within short viewports - preserve rotated Notes card edges and add rendering regressions for the confirmed failures ## Confirmed defects fixed - 390px routes overflowed by 90px at 150% text because the body minimum width scaled with the root font size - desktop navigation and Notes results escaped the viewport at 1024px/200% text - major display headings used line boxes shorter than the loaded font's painted glyph height - the homepage sticky trailhead heading pinned underneath the sticky header - footer identity collapsed to 0–97px between 593px and 760px - the rotated Notes lead card was clipped by its header container - long article outlines could exceed the usable sticky viewport ## Verification - `npm run validate` - deployment-equivalent `npm run smoke:site -- http://127.0.0.1:4322 'iPhone 12'` — 12 routes, status OK - responsive visual matrix: 11 routes × 8 widths = 88 pages, zero viewport escapes and zero page errors - same 88-page matrix with reduced motion, zero viewport escapes and zero page errors - failed-webfont audit: 10 route/viewport samples, zero overflow or cramped headings - open-state audit: mobile menu and expanded Notes filters at 320px/1024px, zero geometry or stacking failures - compact-navigation resize boundary: remains open through 1024px and closes at 1025px desktop transition - independent pre-fix implementation audit and post-fix visual/code reviews ## Intentionally retained Decorative off-canvas shapes, rotated card stacking, and the mascot caption's layered frame treatment remain where they do not obscure text or controls. ## Follow-up rendering regressions A second independent pass found two boundary failures that the original checks missed: - the Work image caption collided with its copy card at 768px; - Work, Principles, and Notes overflowed at 1025px/200% text, with Principles also overflowing at 1280px/200% text. The follow-up commit removes the caption's negative tablet offset, permits emergency display-heading wrapping, makes Notes grid tracks shrinkable, stacks constrained Notes rows by container width, and keeps the enlarged Notes lead card content inside its clipped paper surface. Additional regression coverage now exercises 1025px and 1280px at 200% text, visible header-control separation, Notes lead-card clipping, and the 768px Work caption/copy geometry. Final local verification on head `bf29e6f`: - `npm run validate` - deployment-equivalent 12-route smoke suite - normal-motion and reduced-motion matrices: 11 routes × 8 widths = 88 pages each, zero viewport escapes and zero page errors - fallback-font audit: 10 samples, zero failures - open-state audit: 4 samples, zero failures - manual follow-up screenshots at 768px and the four enlarged-text failure cases ## Final independent review corrections Independent review of the follow-up found three issues before merge: - the Notes lead-card clipping assertion ignored child offsets within the clipped parent; - the PUBLIC AGENT descriptor overlapped Home at 1025px/200% text; - global emergency wrapping split normal homepage hero words at 1440px. Commit `0770a22` corrects the geometry assertions, hides the optional descriptor only across the desktop transition band, restores normal balanced wrapping globally, and limits emergency wrapping to the constrained Work and Principles headings that require it. It also adds a rendered character-line regression check against normal mid-word heading breaks. The corrected head again passes the full validation, canonical smoke suite, normal/reduced 88-page matrices, fallback-font audit, open-state audit, and direct visual checks of every reported screenshot. ## Final review disposition Independent code re-review passed commit `0770a22` with no findings. The final visual reviewer reported a blank Chamblee booklet image in two reduced-motion audit screenshots. Live probing showed the production image had a valid `currentSrc`, `complete=true`, and nonzero natural dimensions at both 320px and 1024px before scrolling. The temporary full-page audit harness was capturing before the async-decoding image painted. After making the harness await `HTMLImageElement.decode()`, the complete 88-page reduced-motion matrix remained geometrically clean and both regenerated screenshots visibly contained the booklet artwork. No production-code change was required.

clawlter added 1 commit

2026-07-19 16:13:42 -04:00

fix(rendering): harden responsive layouts

Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Has been cancelled

Details

f151b95f74

clawlter added 1 commit

2026-07-19 17:11:44 -04:00

fix(rendering): close text resize regressions

Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Has been cancelled

Details

bf29e6f1db