Skip to content

Bump the CSS cache key, and stop flex breaking inline links - #189

Merged
vahid-ahmadi merged 2 commits into
mainfrom
fix/css-cache-bust-and-notes-wrap
Aug 26, 2026
Merged

Bump the CSS cache key, and stop flex breaking inline links#189
vahid-ahmadi merged 2 commits into
mainfrom
fix/css-cache-bust-and-notes-wrap

Conversation

@vahid-ahmadi

Copy link
Copy Markdown
Contributor

Two bugs, both found by measuring the live page rather than reading the source.

The CSS fix from #188 was not reaching browsers

style.css is cache-busted by a hand-written ?v=N in each page's link tag, and it had sat at v=3 since #180. Both #187 and #188 changed style.css without bumping it, so any browser that had already loaded /style.css?v=3 kept serving the old file from cache and never saw the container-query fix.

Confirmed on the live page — the deployed CSS had the rule, the browser did not:

cachedHref          /style.css?v=3
gridTemplateColumns 140px 172px 170px 175px   <- still 4-up, still clipped

After reloading the same stylesheet under a cache-busting URL:

containerType       inline-size
containerWidth      588px
gridTemplateColumns 281px 281px               <- correct
clipped             false

Bumped to v=4 across 62 pages. Worth knowing going forward: that version is manual, so it has to move whenever style.css does — otherwise a CSS fix reaches the CDN and stops there.

An inline link was breaking mid-word

.vmet-notes-line was display: flex, which makes every child its own flex item — including the inline <a> in the "gated" note. It shrank to a 40px box and broke "working paper" across three lines, splitting the word:

worki
ng
paper

Replaced with a hanging indent, which reproduces the same key/body look while leaving inline content in normal flow. Only two pages use the component and only one line in it carries a link.

Testing

Site suite 1564 passed; contract clean.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Lcj9DDqam9KmVCfhEdnJcJ

Two bugs, both found by measuring the live page rather than the source.

## The CSS fix from #188 was not reaching browsers

style.css is cache-busted by a hand-written `?v=N` in each page's link
tag, and it had sat at v=3 since #180. #187 and #188 both changed
style.css without bumping it, so any browser that had already loaded
`/style.css?v=3` kept serving the old file from cache and never saw the
container-query fix -- confirmed on the live page: the deployed CSS
contained the rule, the browser did not, and the strip stayed clipped
until the stylesheet was reloaded under a different URL.

Bumped to v=4 across 62 pages. Worth noting for future CSS changes: the
version is manual, so it has to move whenever style.css does, or the fix
ships to the CDN and stops there.

## An inline link was breaking mid-word

`.vmet-notes-line` was `display: flex`, which makes EVERY child its own
flex item -- including the inline <a> in the "gated" note. It shrank to
40px and broke "working paper" across three lines, splitting the word.

Replaced with a hanging indent, which reproduces the same key/body look
while leaving inline content in normal flow. Only two pages use this
component and only one line in it carries a link, so the blast radius is
small.

Site suite 1564 passed; contract clean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lcj9DDqam9KmVCfhEdnJcJ
@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
macromod Ready Ready Preview Aug 26, 2026 12:41pm

Request Review

The economy topic pages are emitted by economy/topics.py, which carries
its own copy of the stylesheet link. Bumping the committed HTML without
bumping the template made the two disagree, and the 'Economy topic pages
match committed data' gate caught it. Template updated and all 11 pages
regenerated.
@vahid-ahmadi
vahid-ahmadi merged commit c6c9dd7 into main Aug 26, 2026
6 checks passed
vahid-ahmadi added a commit that referenced this pull request Aug 26, 2026
…191)

The first thing on the page was the core model's accordion, open, with
four dense bullets. The actual map of the suite -- the seven one-line
rows that tell you what each model answers -- sat below them, mostly
below the fold. So the first view was the details of one model rather
than the shape of seven.

Closed the core. The first view is now the map: seven rows, each a
question and a model id, with the detail one click away where it was
always meant to be.

Text: the hero lede and six of the wordiest facts are cut, keeping every
number. The £50,000 example no longer itemises allowance, income tax and
NI on the way to the net figure -- the net figure was the point.

Motion: rows animate in sequence rather than as one block, so the eye
reads the list as seven choices. --qa-i restarts per .qa-list so the
Combine list does not inherit the Models list's delays and arrive half a
second late. Hover and open states now move the border, and the "+"
rotates into a "x" on open. The existing prefers-reduced-motion rule
disables all of it.

Cache key bumped v=4 -> v=5 across 63 files, template included: style.css
changed, and #189 is the lesson about what happens when that is skipped.

Site suite 1564 passed; contract and generator clean.


Claude-Session: https://claude.ai/code/session_01Lcj9DDqam9KmVCfhEdnJcJ

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
vahid-ahmadi added a commit that referenced this pull request Aug 26, 2026
## The notes block had three constraints and no rule satisfied all of them

Keys must align across lines; values must wrap as prose; inline markup
inside a value (a link, a <code>) must stay inline.

- display:flex on the line fails the third: every child becomes a flex
  item, which is how "working paper" ended up a 40px box broken across
  three lines mid-word.
- The hanging indent from #189 fixes that but fails the first: a key
  wider than the indent -- "uk microdata" is 12ch against a 6.5ch indent
  -- shunts its own value out of line with every other row. That is the
  ragged column in the screenshot.

Both attempts put the layout on the LINE, where it can only ever see one
key. Moved to the container: .vmet-notes is the two-column grid and each
line is display:contents, so every key and value becomes a direct item of
one shared grid. Columns align across all lines whatever the longest key
is, and each value is a single grid item whose contents flow inline.

Two validation values were bare text rather than wrapped, which the grid
needs; wrapped them.

## Removed the jobs paragraph

The "Slow calls run as jobs" note is gone from /connect.

Cache key v=5 -> v=6, template included.

Site suite 1564 passed; contract and generator clean.


Claude-Session: https://claude.ai/code/session_01Lcj9DDqam9KmVCfhEdnJcJ

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant