From 7d9aeeb32dcdfaa9ae1aec568165c6968aaec13d Mon Sep 17 00:00:00 2001 From: builder-1 Date: Sat, 5 Sep 2026 14:46:58 +0000 Subject: [PATCH] fix(proposal): stack the hero until the two-column layout fits The hero is `grid-template-columns: minmax(0,auto) minmax(0,1fr)`. The figure claims ~470px, so between 545 and 599 the note column resolves to between 0 and 49px and its `41 minutes` runs past the viewport edge: 49px of horizontal overflow at 545, 40px at 560, 0 from 600. The stack rule lived in the 34rem block, so the hero stacked only to 544 and the 545-599 band was left with a two-column layout that does not fit. Moved to its own 37.5rem block. Horizontal overflow only. The narrow-width height band is out of scope by instruction pending the threshold re-derivation. overflow 545-599: up to 49px -> 0 at all 992 widths swept (320-700 step 1, 700-1920 step 2, innerWidth asserted) 390 2,687 unchanged 768 1,995 unchanged 1,440 2,060 unchanged Co-Authored-By: CRHQ --- templates/proposal.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/templates/proposal.html b/templates/proposal.html index d6ef635..ebf4dfa 100644 --- a/templates/proposal.html +++ b/templates/proposal.html @@ -80,8 +80,6 @@ @media (max-width:34rem){ .page{padding:1.875rem 1rem 2rem} .mast .lead{font-size:1rem} - .hero{grid-template-columns:minmax(0,1fr);gap:.625rem} - .hero .note{padding-bottom:0} .support li{padding-block:.3125rem} .move h2{font-size:1.0625rem} /* height tightening — spacing only, no content removed */ @@ -98,6 +96,15 @@ .ask .when{margin-top:.625rem;padding-top:.625rem} .colophon{margin-top:1.25rem;padding-top:.875rem} } +@media (max-width:37.5rem){ + /* The hero is `minmax(0,auto) minmax(0,1fr)`: the figure claims ~470px, so below 600 the note + column collapses to 0-49px and its `41 minutes` runs past the viewport (49px of horizontal + overflow at 545, 40 at 560, 0 from 600). Stacking until the two-column layout actually fits + is the fix; the previous breakpoint stacked only to 544 and left 545-599 broken. */ + .hero{grid-template-columns:minmax(0,1fr);gap:.625rem} + .hero .note{padding-bottom:0} +} +