improve cart mobile styles

This commit is contained in:
2025-09-10 06:34:34 +03:00
parent 8b3e58e833
commit 76433684e7
5 changed files with 43 additions and 44 deletions

View File

@@ -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>