From 2c48dba02db66a9b32746b4957f1e72db7f94689 Mon Sep 17 00:00:00 2001 From: builder-2 Date: Sat, 5 Sep 2026 14:59:46 +0000 Subject: [PATCH 1/2] fix(templates): hold the height budget at every width, not three samples MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The contract sampled 390, 768 and 1440. All three sit at widths where these templates are compact: 390 is inside the mobile compaction, 768 is past the wide breakpoint, and nobody looked at the band between. Between the two, the compaction had ended and the wider layout had not begun, so the document ran at full desktop spacing inside a still-narrow single column and grew by ~700px. research-brief 550: 3258 -> 2818 peak report 490: 3247 -> 2830 peak postmortem 320: 2961 -> 2818 peak service-health 320: 3140 -> 2734 peak Fixed at the layout. The compact SPACING scale now starts where the layout actually changes rather than at 34rem, so it covers the band; the TYPE compaction stays at 34rem where the measure needs it. A narrow band below 23rem tightens spacing and returns measure to the column — at that width the height is wrapping, not spacing, so narrowing the gutters buys ten times what another spacing cut does. Leading is untouched throughout: 1.5 is the WCAG 1.4.12 baseline and is the wrong thing to spend on a height budget. Swept 320-1920 in 10px steps with window.innerWidth asserted at every step. All seven now peak at 2601-2830 with zero widths over 2900. The three sampled widths are unchanged except research-brief at 768, which drops 2626 -> 2094 because its layout breakpoint is 62rem, so the band fix covers 768 as well. Also found by the same sweep, outside the reported three: - metrics-dashboard overflowed horizontally by 16px at 320 and 6px at 330. An auto-fit minmax floor wider than the content box cannot shrink. Guarded every floor >= 14rem across all seven with minmax(min(,100%),1fr) rather than fixing only the one that failed today. - service-health was over at 320-340 and had not been reported at all. No content removed. Byte budgets held by deleting declarations that restate a value already inherited from a wider block, and by removing three passages that restated each other -- the closing block's first sentence repeated the h1, and the legend's trailing line repeated both the legend items above it and the per-strip counts beside it. Co-Authored-By: CRHQ --- templates/case-study.html | 11 +++++- templates/metrics-dashboard.html | 2 +- templates/postmortem.html | 41 ++++++++++++--------- templates/project-status.html | 12 +++++- templates/report.html | 26 +++++++++++++ templates/research-brief.html | 63 +++++++++++++++++++++++--------- templates/service-health.html | 55 ++++++++++++++++------------ 7 files changed, 148 insertions(+), 62 deletions(-) diff --git a/templates/case-study.html b/templates/case-study.html index 3e604ee..3614aa8 100644 --- a/templates/case-study.html +++ b/templates/case-study.html @@ -94,7 +94,7 @@ .body p+p{margin-top:var(--s3)} .body h3{margin-top:var(--s5);font-size:1.0625rem} .body h3:first-child{margin-top:0} -.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--s6); +.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:var(--s6); margin-top:var(--s6)} .snag{padding:var(--s5);border:1px solid var(--rust-line);border-radius:.75rem; background:var(--rust-soft)} @@ -143,7 +143,16 @@ .kicker blockquote{font-size:1.0625rem} .two{gap:var(--s5)} .body p,.next li,.snag>p{line-height:1.45} +}/* narrow band: spacing + measure, never leading (WCAG 1.4.12). */ +@media (max-width:23rem){ + :root{--s3:.5rem;--s4:.75rem;--s5:.875rem;--s6:1rem;--s7:1.125rem;--s8:1.25rem} + body{padding-inline:var(--s3)} + .snag,.kicker{padding:var(--s3)} + .ledger tbody tr{padding-block:var(--s2)} + .next li+li{margin-top:var(--s1)} + .colophon{margin-top:var(--s4);padding-top:var(--s2)} } + diff --git a/templates/metrics-dashboard.html b/templates/metrics-dashboard.html index 39fe9c6..4346044 100644 --- a/templates/metrics-dashboard.html +++ b/templates/metrics-dashboard.html @@ -99,7 +99,7 @@ margin-top:var(--s2);color:var(--subtle);font-size:.8125rem} /* PANELS */ -.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:var(--s4); +.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:var(--s4); margin-top:var(--s4);align-items:start} .panel{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--card)} .panel>h2{font-size:1rem} diff --git a/templates/postmortem.html b/templates/postmortem.html index 4d268c8..cb9e5b2 100644 --- a/templates/postmortem.html +++ b/templates/postmortem.html @@ -6,19 +6,17 @@ Checkout was unavailable for 3 hours 47 minutes on 12 September diff --git a/templates/project-status.html b/templates/project-status.html index a6b40a7..a3341de 100644 --- a/templates/project-status.html +++ b/templates/project-status.html @@ -105,7 +105,7 @@ .rail li.risk .rail__s{color:var(--warn)} /* SCOPE METERS */ -.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s5); +.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--s5); margin-top:var(--s4)} .m__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)} .m__label{font-size:.875rem} @@ -175,7 +175,17 @@ .ask__who{margin-top:var(--s2)} .ask__n{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase} .colophon{margin-top:var(--s4);padding-top:var(--s2)} +}/* narrow band: spacing + measure, never leading (WCAG 1.4.12). */ +@media (max-width:23rem){ + :root{--s3:.5rem;--s4:.75rem;--s5:.875rem;--s6:1rem;--s7:1.125rem;--s8:1.25rem} + body{padding-inline:var(--s3)} + .verdict{padding:var(--s3)} + .blk li{padding-block:var(--s2);padding-inline:var(--s3)} + .ask li{padding-block:var(--s2)} + .rail li{padding-bottom:var(--s1)} + .colophon{margin-top:var(--s4);padding-top:var(--s2)} } + diff --git a/templates/report.html b/templates/report.html index e11f689..85b098f 100644 --- a/templates/report.html +++ b/templates/report.html @@ -136,6 +136,15 @@ .next,.colophon{max-width:40rem} } @media (max-width:44rem){ + /* the band is one column from here down, so the compact SPACING scale starts here rather + than at 30rem — restoring desktop spacing inside a still-narrow sheet is what made this + document taller at 490px than at 390px. Type stays full until 30rem. */ + :root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.25rem;--s7:1.375rem} + .sec{margin-top:var(--s6)} + .sec>p,.sec>h3+p{margin-top:var(--s3)} + .next{padding-top:var(--s5)} + .steps li{padding-block:var(--s3)} + .list li+li{margin-top:var(--s2)} .lede{grid-template-columns:minmax(0,1fr);gap:var(--s5)} .quarter{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:var(--s4); padding-left:0;padding-top:var(--s4);border-left:0;border-top:1px solid var(--line2)} @@ -161,7 +170,24 @@ .sec>p,.sec>h3+p{margin-top:var(--s3)} .list li,.steps p,.lede p{line-height:1.42} .colophon{margin-top:var(--s5);padding-top:var(--s3)} +}/* Below ~360px the sheet wraps hard. Tighten spacing and return measure to the column; + line-height is left alone — 1.5 is the WCAG 1.4.12 baseline and leading is the wrong + thing to spend on a height budget. */ +@media (max-width:23rem){ + :root{--s3:.5rem;--s4:.75rem;--s5:.8125rem;--s6:1rem;--s7:1.125rem} + .paper{padding-inline:var(--s2)} + .steps li{padding-block:var(--s2)} + .list li+li{margin-top:var(--s1)} + .next{padding-top:var(--s4)} + .colophon{margin-top:var(--s4);padding-top:var(--s3)} + .chart{padding:var(--s3)} + .lede{margin-top:var(--s4);gap:var(--s4)} + .quarter{gap:var(--s3);padding-top:var(--s3)} + .pull{margin:var(--s5) 0;padding-left:var(--s4)} + .sec{margin-top:var(--s5)} + .bars div+div{margin-top:var(--s3)} } + diff --git a/templates/research-brief.html b/templates/research-brief.html index 484c3bd..315fe8b 100644 --- a/templates/research-brief.html +++ b/templates/research-brief.html @@ -102,7 +102,7 @@ margin-top:.15rem} /* CLOSERS */ -.closers{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s5); +.closers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:var(--s5); margin-top:var(--s7);padding-top:var(--s5);border-top:2px solid var(--ink)} .closers h2{font-size:1.1875rem} .bul{margin-top:var(--s4)} @@ -115,39 +115,66 @@ color:var(--subtle);font-size:.8125rem;line-height:1.55} @media (max-width:62rem){ - .cols{grid-template-columns:minmax(0,1fr);gap:var(--s6)} - .rail{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))} -} -@media (max-width:34rem){ + /* One column from here down, so the compact SPACING scale applies from here down too — + not from 34rem. Restoring desktop spacing while the layout is still a single narrow + column is what made this document taller at 550px than at 390px. Type is not touched + here; that stays in the 34rem block where the measure actually needs it. */ :root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.125rem;--s7:1.25rem;--s8:1.5rem} - body{padding:var(--s5) var(--s4) var(--s8);font-size:.9375rem;line-height:1.46} - .q{line-height:1.1} + .cols{grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s5)} + .rail{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))} + body{padding:var(--s5) var(--s4) var(--s8)} .mast{padding-bottom:var(--s4)} - .meta{margin-top:var(--s4);gap:var(--s1) var(--s4)} + .meta{margin-top:var(--s4)} .answer{padding:var(--s4)} - .answer p{margin-top:var(--s2);font-size:1.0625rem;line-height:1.34} .answer p+p{margin-top:var(--s2)} - .cols{margin-top:var(--s5);gap:var(--s5)} .h-sec{padding-bottom:var(--s1)} - .ev p,.bul li,.card>p,.srcs li,.cite{line-height:1.36} - .ev__n{padding-top:.1rem} - .ev h3{font-size:1rem;line-height:1.16} .ev p{margin-top:var(--s1)} - .ev li{grid-template-columns:1.75rem minmax(0,1fr);gap:var(--s3);padding-bottom:var(--s3)} + .ev li{padding-bottom:var(--s3)} .ev li+li{padding-top:var(--s3)} .cite{margin-top:var(--s2)} .card{padding:var(--s4)} .card>p{margin-top:var(--s2)} - .conf{line-height:1.2} .scale{margin-top:var(--s2)} .srcs li+li{margin-top:var(--s2);padding-top:var(--s2)} - /* the rail stops being a rail: confidence and method pair up, sources runs full width */ - .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)} - .rail>section:nth-child(2){grid-column:1/-1;order:1} .closers{margin-top:var(--s5);padding-top:var(--s3);gap:var(--s4)} .bul li+li{margin-top:var(--s2)} .colophon{margin-top:var(--s5);padding-top:var(--s3)} } +@media (max-width:34rem){ + body{font-size:.9375rem;line-height:1.46} + .q{line-height:1.1} + .meta{gap:var(--s1) var(--s4)} + .answer p{margin-top:var(--s2);font-size:1.0625rem;line-height:1.34} + .ev p,.bul li,.card>p,.srcs li,.cite{line-height:1.36} + .ev__n{padding-top:.1rem} + .ev h3{font-size:1rem;line-height:1.16} + .ev li{grid-template-columns:1.75rem minmax(0,1fr);gap:var(--s3)} + .conf{line-height:1.2} + /* the rail stops being a rail: confidence and method pair up, sources runs full width */ + .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)} + .rail>section:nth-child(2){grid-column:1/-1;order:1} +}/* Below ~360px the single column wraps hard and the page grows again. Tighten the SPACING + scale only — line-height stays at 1.46/1.36, because 1.5 is the WCAG 1.4.12 baseline and + compressing leading to hit a height budget is the wrong trade. */ +@media (max-width:23rem){ + :root{--s3:.5rem;--s4:.75rem;--s5:.8125rem;--s6:.875rem;--s7:1rem;--s8:1.125rem} + /* at this width the height is WRAPPING, not spacing — narrowing the side gutters returns + 16px of measure to every paragraph, which buys more than another spacing cut does */ + body{padding-inline:var(--s3)} + /* Measured, not assumed: unpairing the rail here makes the page TALLER (2,983 -> 3,023), + so the pairing stays. The saving at this width is in the evidence gutter instead. */ + .ev li{grid-template-columns:1.5rem minmax(0,1fr);padding-bottom:var(--s2)} + .ev li+li{padding-top:var(--s2)} + .ev__n{font-size:.75rem} + .mast{padding-bottom:var(--s3)} + .answer{padding:var(--s3) var(--s4)} + .card{padding:var(--s3) var(--s4)} + .srcs li+li{margin-top:var(--s1);padding-top:var(--s1)} + .closers{margin-top:var(--s4);padding-top:var(--s2);gap:var(--s3)} + .bul li+li{margin-top:var(--s1)} + .colophon{margin-top:var(--s4);padding-top:var(--s2)} +} + diff --git a/templates/service-health.html b/templates/service-health.html index 123577f..b7c8a67 100644 --- a/templates/service-health.html +++ b/templates/service-health.html @@ -6,25 +6,23 @@ Every service met its objective and the error budget is 71% gone @@ -178,9 +187,9 @@
Reliability review · Q4 FY26 · 8 September

Every service met its objective and the error budget is 71% gone

-

Six weeks into a thirteen-week quarter. Nothing here is breaching an - SLO, and 1 hour 55 minutes of unreliability is left to spend before 31 October. - An objective is a floor; a budget is a total.

+

Six weeks into a thirteen-week quarter, with 1 hour 55 minutes + of unreliability left to spend before 31 October. An objective is a floor; a budget is a + total.

@@ -310,15 +319,13 @@

By service · last 90 days, one bar per day

Operational — full bar Degraded — two-thirds bar Partial outage — short bar - Height and colour both encode the day; counts are written beside each strip. -

+

The thing this board is for

-

Four services, four objectives met, and seventy-one per cent of the quarter spent in six - weeks. Both are true and only one of them is on a status page. The publish pipeline - cleared its floor by six hundredths of a point and took two-thirds of the money.

+

Both of those are true, and only one of them is on a status page. The publish + pipeline cleared its floor by six hundredths of a point and took two-thirds of the money.