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

src/components/MaintainerCard.tsx

@@ -395,7 +395,7 @@ export function MaintainerRowCard({
 export function MaintainerCard({ maintainer }: MaintainerCardProps) {
  return (
  <div
- className="group flex w-full max-w-[190px] flex-col items-center rounded-[20px] corner-squircle p-1 transition-colors duration-200 hover:bg-[#f2f2f2] focus-within:bg-[#f2f2f2] active:bg-[#e5e5e5] motion-reduce:transition-none sm:max-w-[252px] sm:rounded-[26px] sm:p-1.5 dark:hover:bg-[#262626] dark:focus-within:bg-[#262626] dark:active:bg-[#404040]"
+ className="group @container flex w-full max-w-[190px] flex-col items-center rounded-[20px] corner-squircle p-1 transition-colors duration-200 hover:bg-[#f2f2f2] focus-within:bg-[#f2f2f2] active:bg-[#e5e5e5] motion-reduce:transition-none sm:max-w-[252px] sm:rounded-[26px] sm:p-1.5 dark:hover:bg-[#262626] dark:focus-within:bg-[#262626] dark:active:bg-[#404040]"
  aria-label={`Maintainer card for ${maintainer.name}`}
  >
  <a
@@ -416,7 +416,7 @@ export function MaintainerCard({ maintainer }: MaintainerCardProps) {
  </a>
  <div className="flex w-full flex-col items-start gap-2 pb-[18px] pt-4 sm:pb-[27px] sm:pt-5">
  <span
- className="text-left font-ds-mono text-ds-mono-sm text-text-primary sm:text-ds-mono-lg"
+ className="text-left font-ds-mono text-ds-mono-sm text-text-primary @[13rem]:text-ds-mono-lg"
  id={`maintainer-name-${maintainer.github}`}
  >
  {maintainer.name}

src/components/home/HomeCommunitySection.tsx

@@ -22,7 +22,7 @@ function CommunitySkeleton() {
  <div className="space-y-24">
  <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
  <div className="mb-6 h-10 w-52 animate-pulse rounded corner-squircle bg-gray-200/70 dark:bg-gray-800/70" />
- <div className="grid grid-cols-2 gap-6 lg:grid-cols-5">
+ <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-5">
  {Array.from({ length: 10 }).map((_, index) => (
  <div
  key={`maintainer-skeleton-${index}`}
@@ -47,7 +47,7 @@ function HomeCommunityContent() {
  Core Maintainers
  </a>
  </h3>
- <div className="grid grid-cols-2 gap-6 lg:grid-cols-5">
+ <div className="grid grid-cols-2 gap-6 [&>*]:max-w-none sm:grid-cols-3 lg:grid-cols-5">
  {coreMaintainers.map((maintainer) => (
  <MaintainerCard key={maintainer.github} maintainer={maintainer} />
  ))}

src/routes/_library/$libraryId/$version.docs.contributors.tsx

@@ -92,14 +92,14 @@ function RouteComponent() {
  </div>
  </div>
 
- <section>
+ <section className="@container">
  <div
  className={`transition-all duration-300 ${
  viewMode === 'compact'
  ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4'
  : viewMode === 'row'
  ? 'flex flex-col gap-4'
- : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'
+ : 'grid grid-cols-2 gap-6 [&>*>*]:max-w-none @[28rem]:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] @[43rem]:grid-cols-3'
  } mb-8 pt-8`}
  >
  {libraryContributors.map((maintainer, index) => (

src/routes/maintainers.tsx

@@ -333,15 +333,15 @@ function MaintainerGrid({
  }>
 }) {
  return (
- <div>
+ <div className="@container">
  {title && <h3 className="text-2xl font-semibold mb-4">{title}</h3>}
  <div
  className={`transition-all duration-300 ${
  viewMode === 'compact'
  ? 'grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-6'
  : viewMode === 'row'
  ? 'flex flex-col gap-4'
- : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'
+ : 'grid grid-cols-2 gap-6 [&>*>*]:max-w-none @[28rem]:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] @[43rem]:grid-cols-3'
  }`}
  >
  {maintainers.map((maintainer, index) => (
@@ -658,11 +658,11 @@ function RouteComponent() {
  }
  `}</style>
 
- <div className="flex flex-col max-w-full min-h-screen gap-12 p-4 md:p-8 pb-0">
- <div className="flex-1 flex flex-col gap-16 w-full max-w-4xl mx-auto">
+ <div className="flex flex-col max-w-full min-h-screen gap-6 md:gap-12 p-4 md:p-8 pb-0">
+ <div className="flex-1 flex flex-col gap-6 md:gap-16 w-full max-w-4xl mx-auto">
  <header className="">
  <h1 className="text-3xl font-black">Maintainers & Contributors</h1>
- <p className="text-lg mt-4 text-gray-600 dark:text-gray-400">
+ <p className="text-lg mt-3 md:mt-4 text-gray-600 dark:text-gray-400">
  Meet the amazing developers who make TanStack possible through
  their contributions, maintenance, and dedication to open source
  </p>

src/routes/paid-support.tsx

@@ -100,14 +100,14 @@ function PaidSupportComp() {
  </div>
  </div>
 
- <div className="space-y-8">
+ <div className="@container space-y-8">
  <div
  className={`transition-all duration-300 ${
  viewMode === 'compact'
  ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3'
  : viewMode === 'row'
  ? 'flex flex-col gap-4'
- : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'
+ : 'grid grid-cols-2 gap-6 [&>*>*]:max-w-none @[28rem]:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] @[43rem]:grid-cols-3'
  }`}
  >
  {coreMaintainers.map((maintainer, index) => (

src/routes/workshops.tsx

@@ -545,7 +545,7 @@ function InstructorsSection({ instructors }: { instructors: Maintainer[] }) {
  use
  </p>
  </div>
- <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto text-left mb-8">
+ <div className="grid grid-cols-2 md:grid-cols-4 gap-6 [&>*]:max-w-none max-w-6xl mx-auto text-left mb-8">
  {instructors.map((instructor) => (
  <MaintainerCard
  key={instructor.github}