From 8d0c8457d277e2513f490ceefad879bd1abb1199 Mon Sep 17 00:00:00 2001
From: Damian Legawiec <damian@getvendo.com>
Date: Thu, 14 May 2026 16:45:57 +0200
Subject: [PATCH] Fix mobile cart drawer and checkout header

---
 src/app/[country]/[locale]/(checkout)/layout.tsx | 16 +++++++++++++---
 src/components/cart/CartDrawer.tsx               |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/app/[country]/[locale]/(checkout)/layout.tsx b/src/app/[country]/[locale]/(checkout)/layout.tsx
index f9b85ab0..35c227d6 100644
--- a/src/app/[country]/[locale]/(checkout)/layout.tsx
+++ b/src/app/[country]/[locale]/(checkout)/layout.tsx
@@ -6,7 +6,11 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
-import { CheckoutProvider, CheckoutSummary } from "@/contexts/CheckoutContext";
+import {
+  CheckoutProvider,
+  CheckoutSummary,
+  useCheckout,
+} from "@/contexts/CheckoutContext";
 import { POLICY_LINKS } from "@/lib/constants/policies";
 import { getStoreName } from "@/lib/store";
 import { extractBasePath } from "@/lib/utils/path";
@@ -19,7 +23,7 @@ function CheckoutHeader() {
   const t = useTranslations("checkoutLayout");
 
   return (
-    <header className="flex items-center justify-between">
+    <header className="flex items-center justify-between h-16">
       <Link href={basePath || "/"} className="flex items-center space-x-2">
         <Image
           src="/spree.png"
@@ -36,7 +40,7 @@ function CheckoutHeader() {
         aria-label={t("backToStore")}
       >
         <ArrowLeft className="w-4 h-4" aria-hidden="true" />
-        <span className="hidden sm:inline">{t("backToStore")}</span>
+        {t("backToStore")}
       </Link>
     </header>
   );
@@ -70,6 +74,12 @@ function CheckoutFooter() {
 function MobileSummaryToggle() {
   const [isOpen, setIsOpen] = useState(false);
   const t = useTranslations("checkoutLayout");
+  const { summaryContent } = useCheckout();
+
+  // Hide the toggle entirely when there's no summary to show (e.g. the
+  // order-placed page clears summaryContent because the page already
+  // displays the order details inline).
+  if (summaryContent === null) return null;
 
   return (
     <div className="lg:hidden border-b border-gray-200 bg-gray-50">
diff --git a/src/components/cart/CartDrawer.tsx b/src/components/cart/CartDrawer.tsx
index e8d3a420..f5904de4 100644
--- a/src/components/cart/CartDrawer.tsx
+++ b/src/components/cart/CartDrawer.tsx
@@ -88,7 +88,7 @@ export function CartDrawer() {
     >
       <SheetContent
         side="right"
-        className="w-full max-w-md flex flex-col p-0 gap-0"
+        className="data-[side=right]:w-full data-[side=right]:sm:max-w-md flex flex-col p-0 gap-0"
         showCloseButton={false}
         aria-describedby={undefined}
       >