docs: lay hero tiles out in even columns when the hero stacks

[jdx]

The home page hero tiles wrap in a flexbox, so once the hero stacks and centers its column the rows come out ragged — three frameworks then a lone JavaScript, four tools then a lone usage-cli.

Below 960px the tile groups now use a grid instead. Columns are even, so every row lines up at any tile count, and an odd last tile spans the row rather than sitting alone in one column.

Details

• The column floor is 208px, just past the widest tile (Rust plus its experimental pill, measured at 201px), so phones fall back to one column instead of squeezing a label against its pill. Two columns from about 450px up, one below.
• .usage-hero-text gets align-self: stretch and min-width: 0. The stacked hero centers its column, which makes the text block shrink-to-fit; without this the grid widens it past the viewport and overflow-x: clip on the hero cuts the tiles off at both edges.
• Desktop above 960px is untouched: the hero is still two columns with left-aligned tiles, where wrapping reads naturally.

Verification

Built the site and measured tiles per row over CDP at each width. Before: [[3,1],[4,1]] at 900px and 600px. After: [[2,2],[2,2,1]] at 900px and 600px, [[1,1,1,1],[1,1,1,1,1]] at 430px. No horizontal document overflow at 320, 375, 430, 480, 600, 900, or 961px.

Before, at 900px:

Hero tiles wrapping into ragged rows of three and four

After, at 900px:

Hero tiles in even two-column rows with usage-cli spanning the last row

After, at 430px:

Hero tiles in a single column on a phone-width viewport

_{To show artifacts inline, enable in settings.}

  

Summary by CodeRabbit

• Style
  • Improved responsive hero layouts for screens up to 960px wide.
  • Centered hero actions and tiles for better visual alignment.
  • Updated tile grids to handle narrow screens and odd numbers of tiles more cleanly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Central YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: d334b9c0-c3b4-4b8e-9e93-254be9c5f6bf

📥 Commits

Reviewing files that changed from the base of the PR and between 8776bb8 and 9b64995.

📒 Files selected for processing (1)

• docs/.vitepress/theme/custom.css

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.

---

📝 Walkthrough

Walkthrough

The mobile hero layout now supports shrinking text, independently centered actions, and a capped responsive tile grid. The grid centers tile content and allows an odd final tile to span both columns.

Changes

Responsive hero layout

Layer / File(s)	Summary
Hero text and tile layout docs/.vitepress/theme/custom.css	At widths up to 960px, hero text can shrink within its container. Hero actions remain independently centered. Hero tiles use a centered responsive grid with 208px minimum and 440px maximum widths. An odd final tile spans the full grid.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 9b649

This localized CSS change adjusts hero tile layout at narrower widths, with no actionable merge-blocking risk remaining beyond normal checks and review.

Poem

I’m a rabbit with tiles in a row

The grid finds the best way to grow
Text shrinks without fright
Actions stay centered and bright
One last tile spans wide
Responsive hops with pride

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: using even-column hero tile layout when the hero stacks.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}