clients/subscriptions: make SubscriptionTierCard responsive

polarsource · Dec 12, 2023 · c93de2f · c93de2f · vercel · Dec 12, 2023
1 parent b2a7848
commit c93de2f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/clients/apps/web/src/components/Subscriptions/SubscriptionGroupPublic.tsx b/clients/apps/web/src/components/Subscriptions/SubscriptionGroupPublic.tsx
@@ -40,10 +40,10 @@ const SubscriptionGroupPublic = ({
         <p className="dark:text-polar-500 mt-2 text-gray-500">{description}</p>
       </div>
 
-      <div className="-mx-10 flex h-fit flex-row gap-6 overflow-x-auto px-10 py-6 md:mx-0 md:grid md:grid-cols-3 md:overflow-x-visible md:px-0 md:py-2">
+      <div className="-mx-10 flex h-fit flex-row flex-wrap gap-6 overflow-x-auto px-10 py-6 lg:mx-0 lg:overflow-x-visible lg:px-0 lg:py-2">
         {tiers.map((tier) => (
           <SubscriptionTierCard
-            className="self-stretch md:h-full"
+            className="w-full self-stretch lg:max-w-[250px]"
             key={tier.id}
             subscriptionTier={tier}
             variant="small"

diff --git a/clients/apps/web/src/components/Subscriptions/SubscriptionTierCard.tsx b/clients/apps/web/src/components/Subscriptions/SubscriptionTierCard.tsx
@@ -79,14 +79,14 @@ const SubscriptionTierCard: React.FC<SubscriptionTierCardProps> = ({
   const variantStyles = {
     default: {
       name: 'text-lg',
-      card: 'p-8 md:min-w-[280px] md:max-w-[320px] min-h-[360px]',
+      card: 'p-8',
       priceLabel: 'text-5xl !font-[200]',
       description: 'text-sm',
       footer: 'mt-4',
     },
     small: {
       name: 'text-md',
-      card: 'p-6 md:min-w-[230px] md:max-w-[300px] min-w-[260px] max-w-[260px] min-h-[340px]',
+      card: 'p-6',
       priceLabel: 'text-4xl !font-[200]',
       description: 'text-sm',
       footer: 'mt-none',

diff --git a/clients/apps/web/src/components/Subscriptions/TiersPage.tsx b/clients/apps/web/src/components/Subscriptions/TiersPage.tsx
@@ -71,10 +71,10 @@ const TiersPage: React.FC<TiersPageProps> = ({ organization }) => {
             </Link>
           </div>
         </div>
-        <div className="flex flex-col gap-6 md:grid md:grid-cols-4">
+        <div className="flex flex-row flex-wrap gap-6">
           {subscriptionTiers.items.map((tier) => (
             <SubscriptionTierCard
-              className="h-full"
+              className="w-full self-stretch lg:max-w-[250px]"
               key={tier.id}
               subscriptionTier={tier}
             >