From 5766376590749d6b0af3a5e92ed0338b53191bfe Mon Sep 17 00:00:00 2001
From: "web@ppanel" <web@ppanel.dev>
Date: Wed, 8 Jan 2025 00:42:58 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(subscribe):=20Improve=20layout?=
 =?UTF-8?q?=20and=20styling=20in=20subscription=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/user/components/main/product-showcase.tsx | 2 +-
 apps/user/components/subscribe/detail.tsx      | 2 +-
 apps/user/components/subscribe/purchase.tsx    | 2 +-
 apps/user/components/subscribe/renewal.tsx     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/user/components/main/product-showcase.tsx b/apps/user/components/main/product-showcase.tsx
index 82b8086..99a0cf9 100644
--- a/apps/user/components/main/product-showcase.tsx
+++ b/apps/user/components/main/product-showcase.tsx
@@ -50,7 +50,7 @@ export function ProductShowcase() {
       >
         {t('product_showcase_description')}
       </motion.p>
-      <div className='mx-auto flex flex-wrap justify-center gap-8 overflow-x-auto overflow-y-hidden'>
+      <div className='mx-auto flex flex-wrap justify-center gap-8 overflow-x-auto overflow-y-hidden *:max-w-80 *:flex-auto'>
         {data?.map((item, index) => (
           <motion.div
             key={item.id}
diff --git a/apps/user/components/subscribe/detail.tsx b/apps/user/components/subscribe/detail.tsx
index 00feb42..7df51b8 100644
--- a/apps/user/components/subscribe/detail.tsx
+++ b/apps/user/components/subscribe/detail.tsx
@@ -18,7 +18,7 @@ export function SubscribeDetail({ subscribe }: Readonly<SubscribeDetailProps>) {
   return (
     <>
       <div className='font-semibold'>{t('productDetail')}</div>
-      <ul className='grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
+      <ul className='grid grid-cols-1 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
         {subscribe?.name && (
           <li className='flex items-center justify-between'>
             <span className='text-muted-foreground line-clamp-2 flex-1'>{subscribe?.name}</span>
diff --git a/apps/user/components/subscribe/purchase.tsx b/apps/user/components/subscribe/purchase.tsx
index d9328ad..2bee590 100644
--- a/apps/user/components/subscribe/purchase.tsx
+++ b/apps/user/components/subscribe/purchase.tsx
@@ -125,7 +125,7 @@ export default function Purchase({ subscribe, setSubscribe }: Readonly<PurchaseP
             </CardContent>
           </Card>
           <div className='flex flex-col justify-between text-sm'>
-            <div className='grid gap-3'>
+            <div className='mb-6 grid gap-3'>
               <DurationSelector
                 quantity={params.quantity!}
                 unitTime={subscribe?.unit_time}
diff --git a/apps/user/components/subscribe/renewal.tsx b/apps/user/components/subscribe/renewal.tsx
index cb948e2..d94fc2c 100644
--- a/apps/user/components/subscribe/renewal.tsx
+++ b/apps/user/components/subscribe/renewal.tsx
@@ -131,7 +131,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
             </CardContent>
           </Card>
           <div className='flex flex-col justify-between text-sm'>
-            <div className='grid gap-3'>
+            <div className='mb-6 grid gap-3'>
               <DurationSelector
                 quantity={params.quantity!}
                 unitTime={subscribe?.unit_time}