💄 style(ui): Update mobile style

apps/admin/app/dashboard/layout.tsx

@@ -1,6 +1,5 @@
 import { Header } from '@/components/header';
 import { SidebarLeft } from '@/components/sidebar-left';
-import { ScrollArea } from '@shadcn/ui/scroll-area';
 import { SidebarInset, SidebarProvider } from '@shadcn/ui/sidebar';
 import { cookies } from 'next/headers';
 
@@ -10,11 +9,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
   return (
     <SidebarProvider defaultOpen={defaultOpen}>
       <SidebarLeft />
-      <SidebarInset className='flex-grow overflow-hidden'>
+      <SidebarInset className='relative flex-grow overflow-hidden'>
         <Header />
-        <div className='flex h-[calc(100vh-56px)] flex-1 flex-col gap-4 p-4'>
-          <ScrollArea className='h-full flex-grow overflow-hidden'>{children}</ScrollArea>
-        </div>
+        <div className='h-[calc(100vh-56px)] gap-4 overflow-auto p-4'>{children}</div>
       </SidebarInset>
     </SidebarProvider>
   );

apps/user/app/(main)/(user)/order/purchase.tsx

@@ -76,11 +76,11 @@ export default function Purchase({
         if (!open) setSubscribe(undefined);
       }}
     >
-      <DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden border-none md:h-auto'>
-        <DialogHeader>
+      <DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden border-none p-0 md:h-auto'>
+        <DialogHeader className='p-6 pb-0'>
           <DialogTitle>{t('buySubscription')}</DialogTitle>
         </DialogHeader>
-        <div className='grid w-full gap-3 lg:grid-cols-2'>
+        <div className='grid w-full flex-grow gap-3 overflow-auto p-6 pt-0 lg:grid-cols-2'>
           <Card className='border-transparent shadow-none md:border-inherit md:shadow'>
             <CardContent className='grid gap-3 p-0 text-sm md:p-6'>
               <SubscribeDetail
@@ -110,7 +110,7 @@ export default function Purchase({
                     quantity: Number(value),
                   });
                 }}
-                className='flex flex-wrap gap-2'
+                className='flex flex-wrap gap-0.5 *:w-20 md:gap-2'
               >
                 <div className='relative'>
                   <RadioGroupItem value='1' id='1' className='peer sr-only' />
@@ -154,7 +154,7 @@ export default function Purchase({
               </div>
               <div className='font-semibold'>{t('paymentMethod')}</div>
               <RadioGroup
-                className='grid grid-cols-5 gap-2'
+                className='mb-6 grid grid-cols-5 gap-2'
                 value={params.payment}
                 onValueChange={(value) => {
                   setParams({