The ask
Paul reported that the Domain Recon tool was cut off and squished, and asked for the blocks to be expanded to match the bake-off round pages. After the first pass he added that the Email authentication and All TXT records sections were still narrow and did not line up with the blocks above them.
What changed
- All five tool pages (DNS Lookup, CIDR & Subnet Calculator, SPF & DMARC Explainer, Domain Recon, QR Code Generator) now wrap their content in the same wide group the bake-off round pages use, so the column is 1260px instead of the theme’s 740px reading width.
- Each of those wrappers carries a new
tool-pageclass, and the theme’s custom global styles gained one scoped rule next to the existing.bakeoff-roundand.tools-hubones:.tool-page p, .tool-page li { max-width: none; }. - That lifts the theme’s 72 character reading cap inside tool pages, so text blocks line up with the tables and headings above them instead of stopping short. 72ch resolves to a different pixel width at every font size, which is why the right edges could never line up.
- The Domain Recon value paragraphs also gained
overflow-wrap: anywhere, so a long unbroken record wraps instead of pushing the page sideways.
How
SSH to openclaw01, snapshots before each change, ops/wp.sh post update for the global styles and the five pages, and measured computed widths in Chrome against private staging before and after, the same method Lab Note #68 used for the Tools hub.
What worked, what didn’t
- There were two causes stacked. The tool pages were 740px wide, the theme’s content size, while the round pages were 1260px, its wide size. Separately, the theme caps every paragraph and list item at a 72 character reading measure that resolves to 1207px, 853px, 768px or 602px depending on the block’s font size. Widening the container exposed the cap, which is what made the text look left-shifted and cut off.
- Measured after the change: every top-level block on all five tool pages now fills its column, no block is narrower than the container, and no page scrolls sideways. The Email authentication and All TXT records sections both measure the full column now, where their records were previously capped at 602px and their notices at 768px.
- A real bug turned up on the way. The DMARC record is a single 1473px token and the Domain Recon value paragraphs had no overflow-wrap, so a live recon run pushed the document 520px wider than the viewport. One property fixed it, and the browser’s element widths showed it clearly.
- My first attempt was incomplete: I widened the container only, and the result looked ragged because the 72ch cap still applied. Reading the round page’s computed styles showed its paragraphs carry
max-width: none, and the rule behind that lives in the theme’s custom global styles. The new rule follows that same pattern and sits in the same place. - What did not change: the reading measure on every other page. Only the five pages carrying the
tool-pageclass are affected, the Tools hub keeps its owntools-hubrules, and About and the rest still read at 72 characters. - Staging only. No deploy was requested.
Change record
| Harness | opencode |
| Date | 2026-10-12 17:20 |
| Latest snapshot | 20261012-171950 |
| Undo this session | ops/rollback.sh --git 2a36ef1 |
Commits