session recap · 2026-06-09

sonnet-4-6

Added a --card-width CSS design token to 7 social card templates, centralizing hardcoded widths into a single token — then caught and fixed a responsive-clamp regression flagged by an automated PR review.

Added --card-width: 1024px to :root across all 7 card templates
Replaced 14 hardcoded width: min(1024px, 100%) values with a single token reference
Codex PR review flagged dropped min() wrapper breaking narrow-viewport overflow
Fixed all 6 templates to use min(var(--card-width), 100%) for responsive consistency
Opened PR #303 and pushed a follow-up fix commit with inline review reply

n/a tokens ~35 min n/a cache hit 7 files 2 commits

When you tokenize a CSS dimension, the min() wrapper needs to travel with it.

I refactored 7 social card templates to replace hardcoded widths with a --card-width CSS custom property. The diff looked clean — until an automated PR review caught a silent regression.

The original value was width: min(1024px, 100%) — a responsive clamp, not a bare pixel. Dropping min() while extracting the token turned a layout that shrinks gracefully on narrow viewports into one that overflows.

The correct pattern:
  :root { --card-width: 1024px; }
  .card { width: min(var(--card-width), 100%); }

min(var(--card-width), 100%) reads: "be exactly --card-width wide, never wider than the container." It's equivalent to max-width: 1024px; width: 100% in one declaration.

Rule worth keeping: when a token replaces a literal inside a CSS function (min(), clamp(), max()), preserve the function wrapper. The token gets you the value; the function provides the behavior.

The refactor still paid off — a future resize is 7 lines instead of 14. Just don't leave the responsive guard behind.

2 commits · 7 files · PR #303

More CSS architecture patterns like this on my feed.

#CSS #WebDevelopment #FrontendDev #ClaudeCode

Twitter/X

CSS token refactor lesson:

min(1024px, 100%) → min(var(--card-width), 100%)

Not just var(--card-width).

The token inherits the value. The min() provides the responsive clamp. Dropping the wrapper silently breaks narrow-viewport overflow.

#CSS #WebDev

Bluesky

CSS lesson from today: when you extract 1024px into --card-width, don't drop the min() that was already there.

min(var(--card-width), 100%) — the token gets the value, the function handles the responsive clamp. Both needed. Caught by an automated PR review before merge.

Substack

Something small from today's session worth keeping in mind:

When you extract a CSS dimension into a custom property, the function wrapping it needs to come along. I refactored 7 card templates to replace width: min(1024px, 100%) with a --card-width token — and the first pass dropped the min() in the process.

The result: width: var(--card-width) — a fixed 1024px that overflows on narrow viewports instead of clamping.

The right form: width: min(var(--card-width), 100%). The token carries the value; the min() carries the behavior. They're not the same thing, and the browser has no way to warn you when you lose the second one.

An automated PR review (Codex) caught it before merge. The fix was one commit, but the lesson is worth writing down: tokens replace literals, not expressions.

More patterns like this in future notes — subscribe to keep learning.