💥

apps/web/src/components/app-consumers-list.tsx

@@ -51,6 +51,7 @@ export function AppConsumersList() {
   })
 
   const consumers = data ? data.pages.flatMap((p) => p.consumers) : []
+  const numConsumers = consumers.length
 
   return (
     <>
@@ -68,7 +69,12 @@ export function AppConsumersList() {
               started.
             </p>
           ) : (
-            <div className='grid grid-cols grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3'>
+            <div
+              className={`grid grid-cols grid-cols-1 gap-4 sm:grid-cols-${Math.min(
+                2,
+                numConsumers
+              )} xl:grid-cols-${Math.min(3, numConsumers)}`}
+            >
               {consumers.map((consumer) => (
                 <Link
                   key={consumer.id}

apps/web/src/components/project-pricing-plans.tsx

@@ -22,7 +22,7 @@ export function ProjectPricingPlans({
 
   return (
     <div className={cn('mt-8 flex flex-col gap-8', className)}>
-      <h2 className='text-center text-balance leading-snug md:leading-none text-2xl font-extrabold'>
+      <h2 className='text-center text-balance leading-snug md:leading-none text-2xl font-bold'>
         Pricing Plans
       </h2>
 
@@ -37,7 +37,7 @@ export function ProjectPricingPlans({
             key={plan.slug}
             className='flex flex-col gap-4 p-4 border rounded-lg shadow-sm'
           >
-            <h3 className='text-center text-balance leading-snug md:leading-none  text-xl font-bold'>
+            <h3 className='text-center text-balance leading-snug md:leading-none text-xl font-semibold'>
               {plan.name}
             </h3>