fix: size the module grid by its container, not the window

[intech]

Problem

The package cards on /en/packages/ and /en/reference/ render squeezed, while the same component on the home page looks right.

	container	columns	card width	longest name
home page, 1440px window	1180px	3	385px	1 line
/en/packages/, 1440px window	688px	3	221px	2 lines
/en/packages/, 1280px window	624px	3	200px	3 lines, broken mid-word

Cause

The grid asked a viewport media query how many columns to draw, but the component appears in two very different boxes: the home page gives it the full 1180px section, while the documentation pages put it inside the 688px content column. A viewport query cannot tell those apart, so a wide window handed the narrow column a three-column grid. The breakpoints that would have dropped it to two columns only fire when the window shrinks — which also shrinks the documentation column, so they never help.

Fix

The grid now answers to its own container, via container-type: inline-size on .module-groups and @container breakpoints. The two thresholds are the container widths the old viewport breakpoints worked out to, so the home page keeps exactly the layout it has today.

The old viewport rules for .module-grid are removed; the other selectors in those media queries are untouched.

Result

	before	after
/en/packages/, /en/reference/ at 1600 / 1440px	3 × 221px	2 × 338px
/en/packages/, /en/reference/ at 1280 / 1024px	3 × 200px, names on 3 lines	2 × 306px, names on 2 lines
home page, all widths	—	unchanged
every page below 900px	—	unchanged

Validation

pnpm docs:build and pnpm docs:validate:built pass, as does pnpm docs:validate on sources. The @container rules and container-type survive the production CSS pipeline, and the built output measures identically to dev.

Column count and card width were measured on all three pages that use the grid, at nine viewport widths from 1600 down to 375, before and after. The home page is identical to its current behaviour at every one of them; only the two documentation pages change.

Separately, every page was scanned at four viewport widths for any other multi-column layout inside the documentation column whose column count came from a viewport query. .module-grid was the only one. The remaining narrow columns all belong to home-page sections in a 1180px box, where they are intended.

Without @container support a browser falls back to a single column rather than a broken layout. The feature has been available in all major browsers since 2022–2023.

🤖 Generated with Claude Code