Stop the command listings overflowing their card

[barkz]

The bug

What you can do and the Glean Personal listing were 96-character, space-aligned text code blocks. A <pre> scrolls rather than wraps, so below roughly 830px of content width the commands ran past the card edge and had to be dragged sideways to read — which happened on any window narrower than about 850px.

I had measured the earlier fix at 1280px, where they fit, and missed it.

The fix

Both listings are command/effect pairs — tabular content that was being held in a code block by space alignment. They're tables now:

• They wrap instead of scrolling, at any width
• The two continuation rows (a line of spaces, then an arrow) are gone
• GitHub gets the same fix; those blocks scrolled sideways on a phone there too

The builder tags any table whose every row leads with a code span as a command table, so the stylesheet can give the command column half the width and set it as code rather than bold prose.

Two line-breaking details

Hyphens are line-break opportunities in Unicode, so --object-type split after the dashes. word-break: keep-all suppresses that, with overflow-wrap: break-word left as the fallback for a token wider than the column.

Quickstart

Kept its terminal framing but lost its widest line — the "or use a token" aside moved into prose underneath, where it reads better anyway.

Result

	Before	After
Widest code line on the page	96 chars	70 chars
Listings that scroll sideways	2	0

A new test fails if any code block on the built page goes past 80 characters again, so this can't come back quietly.

Verified by rendering the section alone at 1100px and 900px. Ran 1094 tests — OK (1,090 before).

🤖 Generated with Claude Code