fix: recent sales responsive on ipad view (#40)

src/pages/dashboard/components/recent-sales.tsx

@@ -3,64 +3,80 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 export function RecentSales() {
   return (
     <div className='space-y-8'>
-      <div className='flex items-center'>
+      <div className='flex items-center gap-4'>
         <Avatar className='h-9 w-9'>
           <AvatarImage src='/avatars/01.png' alt='Avatar' />
           <AvatarFallback>OM</AvatarFallback>
         </Avatar>
-        <div className='ml-4 space-y-1'>
-          <p className='text-sm font-medium leading-none'>Olivia Martin</p>
-          <p className='text-sm text-muted-foreground'>
-            olivia.martin@email.com
-          </p>
+        <div className='flex flex-1 flex-wrap items-center justify-between'>
+          <div className='space-y-1'>
+            <p className='text-sm font-medium leading-none'>Olivia Martin</p>
+            <p className='text-sm text-muted-foreground'>
+              olivia.martin@email.com
+            </p>
+          </div>
+          <div className='font-medium'>+$1,999.00</div>
         </div>
-        <div className='ml-auto font-medium'>+$1,999.00</div>
       </div>
-      <div className='flex items-center'>
+      <div className='flex items-center gap-4'>
         <Avatar className='flex h-9 w-9 items-center justify-center space-y-0 border'>
           <AvatarImage src='/avatars/02.png' alt='Avatar' />
           <AvatarFallback>JL</AvatarFallback>
         </Avatar>
-        <div className='ml-4 space-y-1'>
-          <p className='text-sm font-medium leading-none'>Jackson Lee</p>
-          <p className='text-sm text-muted-foreground'>jackson.lee@email.com</p>
+        <div className='flex flex-1 flex-wrap items-center justify-between'>
+          <div className='space-y-1'>
+            <p className='text-sm font-medium leading-none'>Jackson Lee</p>
+            <p className='text-sm text-muted-foreground'>
+              jackson.lee@email.com
+            </p>
+          </div>
+          <div className='font-medium'>+$39.00</div>
         </div>
-        <div className='ml-auto font-medium'>+$39.00</div>
       </div>
-      <div className='flex items-center'>
+      <div className='flex items-center gap-4'>
         <Avatar className='h-9 w-9'>
           <AvatarImage src='/avatars/03.png' alt='Avatar' />
           <AvatarFallback>IN</AvatarFallback>
         </Avatar>
-        <div className='ml-4 space-y-1'>
-          <p className='text-sm font-medium leading-none'>Isabella Nguyen</p>
-          <p className='text-sm text-muted-foreground'>
-            isabella.nguyen@email.com
-          </p>
+        <div className='flex flex-1 flex-wrap items-center justify-between'>
+          <div className='space-y-1'>
+            <p className='text-sm font-medium leading-none'>Isabella Nguyen</p>
+            <p className='text-sm text-muted-foreground'>
+              isabella.nguyen@email.com
+            </p>
+          </div>
+          <div className='font-medium'>+$299.00</div>
         </div>
-        <div className='ml-auto font-medium'>+$299.00</div>
       </div>
-      <div className='flex items-center'>
+
+      <div className='flex items-center gap-4'>
         <Avatar className='h-9 w-9'>
           <AvatarImage src='/avatars/04.png' alt='Avatar' />
           <AvatarFallback>WK</AvatarFallback>
         </Avatar>
-        <div className='ml-4 space-y-1'>
-          <p className='text-sm font-medium leading-none'>William Kim</p>
-          <p className='text-sm text-muted-foreground'>will@email.com</p>
+        <div className='flex flex-1 flex-wrap items-center justify-between'>
+          <div className='space-y-1'>
+            <p className='text-sm font-medium leading-none'>William Kim</p>
+            <p className='text-sm text-muted-foreground'>will@email.com</p>
+          </div>
+          <div className='font-medium'>+$99.00</div>
         </div>
-        <div className='ml-auto font-medium'>+$99.00</div>
       </div>
-      <div className='flex items-center'>
+
+      <div className='flex items-center gap-4'>
         <Avatar className='h-9 w-9'>
           <AvatarImage src='/avatars/05.png' alt='Avatar' />
           <AvatarFallback>SD</AvatarFallback>
         </Avatar>
-        <div className='ml-4 space-y-1'>
-          <p className='text-sm font-medium leading-none'>Sofia Davis</p>
-          <p className='text-sm text-muted-foreground'>sofia.davis@email.com</p>
+        <div className='flex flex-1 flex-wrap items-center justify-between'>
+          <div className='space-y-1'>
+            <p className='text-sm font-medium leading-none'>Sofia Davis</p>
+            <p className='text-sm text-muted-foreground'>
+              sofia.davis@email.com
+            </p>
+          </div>
+          <div className='font-medium'>+$39.00</div>
         </div>
-        <div className='ml-auto font-medium'>+$39.00</div>
       </div>
     </div>
   )