refactor(maintainers): size card grids by container width instead of viewport

[sukvvon]

Maintainer card grids sized their columns from the viewport while the cards themselves were capped at a fixed width, so the two disagreed: cards stopped growing while their grid tracks kept expanding, and the leftover space turned into gaps. Narrow screens also dropped to a single column, turning a 40-person list into a very long scroll.

Affected pages

Every place MaintainerCard renders in its full variant. Preview: https://refactor-maintainer-card-responsive-grid-tanstack-com.thetanstack.workers.dev

Page	Path	Change
Maintainers	/maintainers	two-column floor, auto-fit grid, container-based 3-column ceiling, tighter vertical rhythm
Enterprise Support	/paid-support	two-column floor, auto-fit grid, container-based 3-column ceiling
Library contributors	/query/latest/docs/contributors	two-column floor, auto-fit grid, container-based 3-column ceiling
Home — Core Maintainers	/	added sm:grid-cols-3 step, released card cap, synced skeleton
Workshops — Instructors	/workshops	4-column step moved lg → md, released card cap

The contributors page applies to every library, not just Query.

MaintainersSection / LandingCommunitySection use the same grid but are unreachable — nothing imports LandingCommunitySection — so they are left untouched.

Changes

MaintainerCard — the name switched from sm:text-ds-mono-lg (viewport) to @[13rem]:text-ds-mono-lg (card width). The card is now an @container, so the name follows the space it actually has rather than the window size.

Grids — maintainers, paid-support, and the library contributors page replace grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 with grid-cols-2 as a floor, an auto-fit track above @[28rem] (minmax(180px,1fr)), and a 3-column ceiling at @[43rem]. [&>*>*]:max-w-none releases the card cap so cards fill their track.

Both bounds are per-container, not per-viewport. That matters on the contributors page, where the partners sidebar leaves the content column far narrower than the window — a viewport breakpoint forced 3 columns into a 380px area.

The two-column floor replaces the old single-column step. On a 375px screen a 40-person list goes from roughly 18,600px of scroll to 5,640px (~70% less) while the avatar stays at 148px, which is still large enough to recognize a face.

Home — added sm:grid-cols-3 between the existing 2- and 5-column steps, and matched the loading skeleton so the layout does not shift when content arrives.

Workshops — moved the 4-column step from lg to md. With 4 instructors this keeps rows balanced (2+2 or 4) and avoids the 2-column stretch that let cards reach ~484px.

Also reduced the vertical rhythm on maintainers for narrow screens (gap-16 → gap-6 md:gap-16, gap-12 → gap-6 md:gap-12, mt-4 → mt-3 md:mt-4).

Verification

Measured in the browser across container widths on every affected page:

• No single-column state remains — swept 280–900px on all three grid pages
• No empty space between a card and its grid track (previously up to 100px on paid-support, 70px on home/workshops)
• No size inversion — swept 320–1600px and confirmed cards never jump larger as the screen shrinks
• No name wraps to a second line at the sizes where the large type applies (previously 12 of 40 at 187px cards)
• compact and row view modes unaffected; light mode unchanged

Summary by CodeRabbit

• Style
  • Improved responsive layouts for maintainer, contributor, and instructor cards across community, library, support, and workshop pages.
  • Cards now adapt more smoothly to their available space using container-based sizing and auto-fit columns.
  • Updated grid spacing, card widths, typography, and padding for improved readability on smaller screens.
  • Maintainer and instructor grids display more columns at medium screen sizes where space allows.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0affd300-0ee0-4839-a998-05cc2377f09c

📥 Commits

Reviewing files that changed from the base of the PR and between e7a01b2 and 737eb23.

📒 Files selected for processing (3)

• src/routes/_library/$libraryId/$version.docs.contributors.tsx
• src/routes/maintainers.tsx
• src/routes/paid-support.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

• src/routes/maintainers.tsx
• src/routes/_library/$libraryId/$version.docs.contributors.tsx
• src/routes/paid-support.tsx

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

---

📝 Walkthrough

Walkthrough

The changes update maintainer, contributor, and instructor layouts to use container queries, auto-fit columns, revised breakpoints, unconstrained child widths, and responsive page spacing.

Changes

Responsive card layouts

Layer / File(s)	Summary
Card container behavior src/components/MaintainerCard.tsx	Maintainer card sizing, spacing, and name typography now respond to a 13rem container query.
Full-card page grids src/routes/_library/.../$version.docs.contributors.tsx, src/routes/maintainers.tsx, src/routes/paid-support.tsx	Full-card layouts now use container-aware auto-fit columns. Child width constraints are removed, and maintainer page spacing is responsive.
Secondary grid breakpoints src/components/home/HomeCommunitySection.tsx, src/routes/workshops.tsx	Home maintainer grids use three columns at sm. Workshop instructor grids use four columns at md. Direct child max-width constraints are removed.

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

Merge Risk: ⚪ Minimal · up to 737eb

This PR adjusts maintainer card grid sizing and responsive breakpoints without introducing a concrete correctness, security, availability, or deployment risk; no actionable merge-blocking risk remains after normal checks and review.

🚥 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.
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 and concisely describes the main change: sizing maintainer card grids by container width instead of viewport width.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/maintainer-card-responsive-grid

---

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.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	da5b37f	Commit Preview URL Branch Preview URL	Aug 18 2026, 07:08 PM