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}