From 76433684e7ae43306c7284852bb1e39f073f502c Mon Sep 17 00:00:00 2001
From: Karli <projects@supa.ee>
Date: Wed, 10 Sep 2025 06:34:34 +0300
Subject: [PATCH] improve cart mobile styles

---
 .../_components/cart/analysis-location.tsx    | 13 ++++----
 .../(user)/_components/cart/cart-item.tsx     | 10 +++----
 .../(user)/_components/cart/cart-items.tsx    | 10 +++----
 .../(user)/_components/cart/discount-code.tsx | 24 +++++++--------
 app/home/(user)/_components/cart/index.tsx    | 30 +++++++++----------
 5 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/app/home/(user)/_components/cart/analysis-location.tsx b/app/home/(user)/_components/cart/analysis-location.tsx
index 9e1ab16..99355dd 100644
--- a/app/home/(user)/_components/cart/analysis-location.tsx
+++ b/app/home/(user)/_components/cart/analysis-location.tsx
@@ -55,11 +55,15 @@ export default function AnalysisLocation({ cart, synlabAnalyses }: { cart: Store
   }
 
   return (
-    <div className="w-full bg-white flex flex-col txt-medium gap-y-2">
+    <div className="w-full h-full bg-white flex flex-col txt-medium gap-y-4">
+      <p className="text-sm text-muted-foreground">
+        <Trans i18nKey={'cart:locations.description'} />
+      </p>
+
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit((data) => onSubmit(data))}
-          className="w-full mb-2 flex gap-x-2"
+          className="w-full mb-2 flex gap-x-2 flex-1"
         >
           <Select
             value={form.watch('locationId')}
@@ -106,11 +110,6 @@ export default function AnalysisLocation({ cart, synlabAnalyses }: { cart: Store
           </p>
         </div>
       )}
-
-      <p className="text-sm text-muted-foreground">
-        <Trans i18nKey={'cart:locations.description'} />
-      </p>
-
     </div>
   )
 }
diff --git a/app/home/(user)/_components/cart/cart-item.tsx b/app/home/(user)/_components/cart/cart-item.tsx
index db6a4ec..46ccbae 100644
--- a/app/home/(user)/_components/cart/cart-item.tsx
+++ b/app/home/(user)/_components/cart/cart-item.tsx
@@ -17,7 +17,7 @@ export default function CartItem({ item, currencyCode }: {
 
   return (
     <TableRow className="w-full" data-testid="product-row">
-      <TableCell className="text-left w-[100%] px-6">
+      <TableCell className="text-left w-[100%] px-4 sm:px-6">
         <p
           className="txt-medium-plus text-ui-fg-base"
           data-testid="product-title"
@@ -26,11 +26,11 @@ export default function CartItem({ item, currencyCode }: {
         </p>
       </TableCell>
 
-      <TableCell className="px-6">
+      <TableCell className="px-4 sm:px-6">
         {item.quantity}
       </TableCell>
 
-      <TableCell className="min-w-[80px] px-6">
+      <TableCell className="min-w-[80px] px-4 sm:px-6">
         {formatCurrency({
           value: item.unit_price,
           currencyCode,
@@ -38,7 +38,7 @@ export default function CartItem({ item, currencyCode }: {
         })}
       </TableCell>
 
-      <TableCell className="min-w-[80px] px-6">
+      <TableCell className="min-w-[80px] px-4 sm:px-6 text-right">
         {formatCurrency({
           value: item.total,
           currencyCode,
@@ -46,7 +46,7 @@ export default function CartItem({ item, currencyCode }: {
         })}
       </TableCell>
 
-      <TableCell className="text-right px-6">
+      <TableCell className="text-right px-4 sm:px-6">
         <span className="flex gap-x-1 justify-end w-[60px]">
           <CartItemDelete id={item.id} />
         </span>
diff --git a/app/home/(user)/_components/cart/cart-items.tsx b/app/home/(user)/_components/cart/cart-items.tsx
index 5e7243b..399f0b2 100644
--- a/app/home/(user)/_components/cart/cart-items.tsx
+++ b/app/home/(user)/_components/cart/cart-items.tsx
@@ -22,19 +22,19 @@ export default function CartItems({ cart, items, productColumnLabelKey }: {
     <Table className="rounded-lg border border-separate">
       <TableHeader className="text-ui-fg-subtle txt-medium-plus">
         <TableRow>
-          <TableHead className="px-6">
+          <TableHead className="px-4 sm:px-6">
             <Trans i18nKey={productColumnLabelKey} />
           </TableHead>
-          <TableHead className="px-6">
+          <TableHead className="px-4 sm:px-6">
             <Trans i18nKey="cart:table.quantity" />
           </TableHead>
-          <TableHead className="px-6 min-w-[100px]">
+          <TableHead className="px-4 sm:px-6 min-w-[100px]">
             <Trans i18nKey="cart:table.price" />
           </TableHead>
-          <TableHead className="px-6 min-w-[100px]">
+          <TableHead className="px-4 sm:px-6 min-w-[100px] text-right">
             <Trans i18nKey="cart:table.total" />
           </TableHead>
-          <TableHead className="px-6">
+          <TableHead className="px-4 sm:px-6">
           </TableHead>
         </TableRow>
       </TableHeader>
diff --git a/app/home/(user)/_components/cart/discount-code.tsx b/app/home/(user)/_components/cart/discount-code.tsx
index 9df9073..1cee618 100644
--- a/app/home/(user)/_components/cart/discount-code.tsx
+++ b/app/home/(user)/_components/cart/discount-code.tsx
@@ -38,7 +38,7 @@ export default function DiscountCode({ cart }: {
     const loading = toast.loading(t('cart:discountCode.removeLoading'));
 
     const result = await removePromotionCodeAction(code, appliedCodes)
-    
+
     toast.dismiss(loading);
     if (result.success) {
       toast.success(t('cart:discountCode.removeSuccess'));
@@ -50,7 +50,7 @@ export default function DiscountCode({ cart }: {
   const addPromotionCode = async (code: string) => {
     const loading = toast.loading(t('cart:discountCode.addLoading'));
     const result = await addPromotionCodeAction(code)
-    
+
     toast.dismiss(loading);
     if (result.success) {
       toast.success(t('cart:discountCode.addSuccess'));
@@ -69,11 +69,15 @@ export default function DiscountCode({ cart }: {
   });
 
   return (
-    <div className="w-full bg-white flex flex-col txt-medium">
+    <div className="w-full h-full bg-white flex flex-col txt-medium gap-y-4">
+      <p className="text-sm text-muted-foreground">
+        <Trans i18nKey={'cart:discountCode.subtitle'} />
+      </p>
+
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))}
-          className="w-full mb-2 flex gap-x-2 sm:flex-row flex-col gap-y-2"
+          className="w-full mb-2 flex gap-x-2 sm:flex-row flex-col gap-y-2 flex-1"
         >
           <FormField
             name={'code'}
@@ -89,14 +93,14 @@ export default function DiscountCode({ cart }: {
           <Button
             type="submit"
             variant="secondary"
-            className="h-full"
+            className="h-min"
           >
             <Trans i18nKey={'cart:discountCode.apply'} />
           </Button>
         </form>
       </Form>
 
-      {promotions.length > 0 ? (
+      {promotions.length > 0 && (
         <div className="w-full flex items-center mt-4">
           <div className="flex flex-col w-full gap-y-2">
             <p>
@@ -110,12 +114,12 @@ export default function DiscountCode({ cart }: {
                   className="flex items-center justify-between w-full max-w-full mb-2"
                   data-testid="discount-row"
                 >
-                  <Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1">
+                  <Text className="flex gap-x-1 items-baseline text-sm w-4/5 pr-1">
                     <span className="truncate" data-testid="discount-code">
                       <Badge
                         color={promotion.is_automatic ? "green" : "grey"}
                         size="small"
-                        className="px-4"
+                        className="px-4 text-sm"
                       >
                         {promotion.code}
                       </Badge>{" "}
@@ -166,10 +170,6 @@ export default function DiscountCode({ cart }: {
             })}
           </div>
         </div>
-      ) : (
-        <p className="text-sm text-muted-foreground">
-          <Trans i18nKey={'cart:discountCode.subtitle'} />
-        </p>
       )}
     </div>
   )
diff --git a/app/home/(user)/_components/cart/index.tsx b/app/home/(user)/_components/cart/index.tsx
index afd4639..09064bd 100644
--- a/app/home/(user)/_components/cart/index.tsx
+++ b/app/home/(user)/_components/cart/index.tsx
@@ -78,14 +78,14 @@ export default function Cart({
       </div>
       {hasCartItems && (
         <>
-          <div className="flex justify-end gap-x-4 px-6 pt-4">
-            <div className="mr-[36px]">
+          <div className="flex sm:justify-end gap-x-4 px-4 sm:px-6 pt-2 sm:pt-4">
+            <div className="w-full sm:w-auto sm:mr-[42px]">
               <p className="ml-0 font-bold text-sm text-muted-foreground">
                 <Trans i18nKey="cart:order.subtotal" />
               </p>
             </div>
-            <div className="mr-[116px]">
-              <p className="text-sm">
+            <div className={`sm:mr-[112px] sm:w-[50px]`}>
+              <p className="text-sm text-right">
                 {formatCurrency({
                   value: cart.subtotal,
                   currencyCode: cart.currency_code,
@@ -94,14 +94,14 @@ export default function Cart({
               </p>
             </div>
           </div>
-          <div className="flex justify-end gap-x-4 px-6 py-2">
-            <div className="mr-[36px]">
+          <div className="flex sm:justify-end gap-x-4 px-4 sm:px-6 py-2 sm:py-4">
+            <div className="w-full sm:w-auto sm:mr-[42px]">
               <p className="ml-0 font-bold text-sm text-muted-foreground">
                 <Trans i18nKey="cart:order.promotionsTotal" />
               </p>
             </div>
-            <div className="mr-[116px]">
-              <p className="text-sm">
+            <div className={`sm:mr-[112px] sm:w-[50px]`}>
+              <p className="text-sm text-right">
                 {formatCurrency({
                   value: cart.discount_total,
                   currencyCode: cart.currency_code,
@@ -110,14 +110,14 @@ export default function Cart({
               </p>
             </div>
           </div>
-          <div className="flex justify-end gap-x-4 px-6">
-            <div className="mr-[36px]">
+          <div className="flex sm:justify-end gap-x-4 px-4 sm:px-6">
+            <div className="w-full sm:w-auto sm:mr-[42px]">
               <p className="ml-0 font-bold text-sm">
                 <Trans i18nKey="cart:order.total" />
               </p>
             </div>
-            <div className="mr-[116px]">
-              <p className="text-sm">
+            <div className={`sm:mr-[112px] sm:w-[50px]`}>
+              <p className="text-sm text-right">
                 {formatCurrency({
                   value: cart.total,
                   currencyCode: cart.currency_code,
@@ -129,7 +129,7 @@ export default function Cart({
         </>
       )}
 
-      <div className="flex sm:flex-row flex-col gap-y-6 py-8 gap-x-4">
+      <div className="flex sm:flex-row flex-col gap-y-6 py-4 sm:py-8 gap-x-4">
         {IS_DISCOUNT_SHOWN && (
           <Card
             className="flex flex-col justify-between w-full sm:w-1/2"
@@ -139,7 +139,7 @@ export default function Cart({
                 <Trans i18nKey="cart:discountCode.title" />
               </h5>
             </CardHeader>
-            <CardContent>
+            <CardContent className="h-full">
               <DiscountCode cart={{ ...cart }} />
             </CardContent>
           </Card>
@@ -154,7 +154,7 @@ export default function Cart({
                 <Trans i18nKey="cart:locations.title" />
               </h5>
             </CardHeader>
-            <CardContent>
+            <CardContent className="h-full">
               <AnalysisLocation cart={{ ...cart }} synlabAnalyses={synlabAnalyses} />
             </CardContent>
           </Card>