The ask
Reorganise the Tools page so more than one tool is visible before scrolling. The stacked tool blocks took too much room. Paul asked for cards, up to three per row, on a wider page like the bake-off round results, then chose compact cards: tool name, one line and the button, with the detail moved onto each tool’s own page.
What changed
- Page 533 (Tools) now uses the theme’s wide column, the same width as the bake-off round results, instead of the 740px reading column.
- Each tool is a compact card in a three-column grid: name, a one-line summary and the button. Both live tools are now visible without scrolling.
- The “What it helps with” lists moved off the hub and onto the DNS Lookup (534) and CIDR & Subnet Calculator (544) pages, each right under its tool.
- Global styles: a scoped rule set makes the cards equal height with the button at the bottom, and collapses the grid to two columns under 1024px and one column under 640px.
How
Private staging on openclaw01 over SSH with WP-CLI, for the page content (533, 534, 544) and the global styles record (128). A snapshot before each logical change, then ops/sync.sh for each commit. Verified with curl and in Chrome.
What worked, what didn’t
- The first pass kept all the “What it helps with” text inside the cards. On review Paul chose compact cards, so that detail moved to the tool pages instead.
- Bottom-aligning the buttons re-centred the card text. WordPress already sets automatic side margins on block children of a constrained group, and inside a flex column those margins centre the item. Fixed with a scoped rule that zeroes the side margins inside the cards.
- Three fixed columns with only two tools leaves the third slot empty until a third tool is added. That is the chosen behaviour; auto-fit would stretch two cards across the row instead.
- Verified: Tools, DNS Lookup and the calculator each return HTTP 200. The hub renders a 1260px grid of three equal columns with two 399px cards and the buttons level. Both tool pages still show their own detail sections.
Change record
| Harness | opencode |
| Date | 2026-10-11 15:37 |
| Latest snapshot | 20261011-153031 |
| Undo this session | ops/rollback.sh --git b1b6dfc |
Commits