From 7d79636a641b43c04b4f8c7b405901713cc07223 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 19 Aug 2026 03:38:50 +0900
Subject: [PATCH 1/3] refactor(components/MaintainerCard): switch name size
 from viewport to card width with container query

---
 src/components/MaintainerCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MaintainerCard.tsx b/src/components/MaintainerCard.tsx
index 9fc5693e6..7256a6493 100644
--- a/src/components/MaintainerCard.tsx
+++ b/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}

From e7a01b25eb58d6b03927d3eab4327dcb8f03ab0f Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 19 Aug 2026 03:39:46 +0900
Subject: [PATCH 2/3] refactor(maintainers): remove 'max-w' cap so cards fill
 grid tracks and adjust responsive columns

---
 src/components/home/HomeCommunitySection.tsx           |  4 ++--
 .../_library/$libraryId/$version.docs.contributors.tsx |  4 ++--
 src/routes/maintainers.tsx                             | 10 +++++-----
 src/routes/paid-support.tsx                            |  4 ++--
 src/routes/workshops.tsx                               |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/home/HomeCommunitySection.tsx b/src/components/home/HomeCommunitySection.tsx
index 29c6cbfb7..16d7589c7 100644
--- a/src/components/home/HomeCommunitySection.tsx
+++ b/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} />
           ))}
diff --git a/src/routes/_library/$libraryId/$version.docs.contributors.tsx b/src/routes/_library/$libraryId/$version.docs.contributors.tsx
index 9a8956c36..3cfa60c82 100644
--- a/src/routes/_library/$libraryId/$version.docs.contributors.tsx
+++ b/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-[repeat(auto-fit,minmax(180px,1fr))] gap-6 [&>*>*]:max-w-none @[43rem]:grid-cols-3'
                 } mb-8 pt-8`}
               >
                 {libraryContributors.map((maintainer, index) => (
diff --git a/src/routes/maintainers.tsx b/src/routes/maintainers.tsx
index 733472ea5..b8228bcca 100644
--- a/src/routes/maintainers.tsx
+++ b/src/routes/maintainers.tsx
@@ -333,7 +333,7 @@ function MaintainerGrid({
   }>
 }) {
   return (
-    <div>
+    <div className="@container">
       {title && <h3 className="text-2xl font-semibold mb-4">{title}</h3>}
       <div
         className={`transition-all duration-300 ${
@@ -341,7 +341,7 @@ function MaintainerGrid({
             ? '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-[repeat(auto-fit,minmax(180px,1fr))] gap-6 [&>*>*]:max-w-none @[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>
diff --git a/src/routes/paid-support.tsx b/src/routes/paid-support.tsx
index d8f0fc681..d2553fe29 100644
--- a/src/routes/paid-support.tsx
+++ b/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-[repeat(auto-fit,minmax(180px,1fr))] gap-6 [&>*>*]:max-w-none @[43rem]:grid-cols-3'
               }`}
             >
               {coreMaintainers.map((maintainer, index) => (
diff --git a/src/routes/workshops.tsx b/src/routes/workshops.tsx
index da7501b4f..2720d96e0 100644
--- a/src/routes/workshops.tsx
+++ b/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}

From 737eb23b773ca870bf544ef82ef1e019fe6b1c43 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 19 Aug 2026 03:55:35 +0900
Subject: [PATCH 3/3] refactor(maintainers): keep a two-column floor so narrow
 screens stop scrolling one card at a time

---
 src/routes/_library/$libraryId/$version.docs.contributors.tsx | 2 +-
 src/routes/maintainers.tsx                                    | 2 +-
 src/routes/paid-support.tsx                                   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/_library/$libraryId/$version.docs.contributors.tsx b/src/routes/_library/$libraryId/$version.docs.contributors.tsx
index 3cfa60c82..ac7d52482 100644
--- a/src/routes/_library/$libraryId/$version.docs.contributors.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.contributors.tsx
@@ -99,7 +99,7 @@ function RouteComponent() {
                     ? '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-[repeat(auto-fit,minmax(180px,1fr))] gap-6 [&>*>*]:max-w-none @[43rem]:grid-cols-3'
+                      : '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) => (
diff --git a/src/routes/maintainers.tsx b/src/routes/maintainers.tsx
index b8228bcca..cf59b737b 100644
--- a/src/routes/maintainers.tsx
+++ b/src/routes/maintainers.tsx
@@ -341,7 +341,7 @@ function MaintainerGrid({
             ? '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-[repeat(auto-fit,minmax(180px,1fr))] gap-6 [&>*>*]:max-w-none @[43rem]:grid-cols-3'
+              : '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) => (
diff --git a/src/routes/paid-support.tsx b/src/routes/paid-support.tsx
index d2553fe29..1c6c2467e 100644
--- a/src/routes/paid-support.tsx
+++ b/src/routes/paid-support.tsx
@@ -107,7 +107,7 @@ function PaidSupportComp() {
                   ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3'
                   : viewMode === 'row'
                     ? 'flex flex-col gap-4'
-                    : 'grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-6 [&>*>*]:max-w-none @[43rem]:grid-cols-3'
+                    : '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) => (