From 3273d4af2ad8dd2e6627aa33bffa6e82eb8f9663 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 31 Oct 2025 18:06:23 +0100
Subject: [PATCH] Make receipt page responsive and add print page breaks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase max width from max-w-3xl to max-w-4xl/5xl for better screen fit
- Add responsive breakpoints: full width on mobile, constrained on larger screens
- Add print-page-break class for automatic page breaks between sections
- Each major section now prints on separate page:
  - Page 1: Order summary with payment details
  - Page 2: Portfolio distribution chart
  - Page 3: Carbon impact comparisons
- Improve print styling: remove shadows, borders, rounded corners
- Set print page size to standard letter format
- Reduce padding on mobile for better space utilization

Fixes receipt layout to be responsive on all screen sizes while
maintaining excellent print quality with proper page breaks.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/CheckoutSuccess.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/pages/CheckoutSuccess.tsx b/src/pages/CheckoutSuccess.tsx
index a18efdf..7267d2c 100644
--- a/src/pages/CheckoutSuccess.tsx
+++ b/src/pages/CheckoutSuccess.tsx
@@ -141,21 +141,26 @@ export default function CheckoutSuccess({
           .print-logo {
             max-width: 200px !important;
           }
+          .print-page-break {
+            page-break-after: always !important;
+            break-after: page !important;
+          }
           @page {
             margin: 0.5in;
+            size: letter;
           }
         }
       `}</style>
 
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-6">
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-4 sm:p-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
-          className="max-w-3xl w-full print-receipt"
+          className="max-w-full sm:max-w-4xl lg:max-w-5xl w-full print-receipt"
         >
-          {/* Receipt Container */}
-          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
+          {/* Receipt Container - Page 1 */}
+          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden print:rounded-none print:shadow-none print-page-break">
             {/* Header with Logo */}
             <motion.div
               initial={{ opacity: 0, y: -20 }}
@@ -298,7 +303,7 @@ export default function CheckoutSuccess({
             </motion.div>
           </div>
 
-          {/* Portfolio Distribution Chart */}
+          {/* Portfolio Distribution Chart - Page 2 */}
           {orderDetails.order.portfolio?.projects && orderDetails.order.portfolio.projects.length > 0 && (
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -306,7 +311,7 @@ export default function CheckoutSuccess({
               transition={{ delay: 0.35 }}
               className="mt-6"
             >
-              <div className="bg-white rounded-3xl shadow-2xl overflow-hidden p-8 print:shadow-none print:border print:border-gray-300">
+              <div className="bg-white rounded-3xl shadow-2xl overflow-hidden p-8 print:rounded-none print:shadow-none print:border-none print-page-break">
                 <h2 className="text-2xl font-bold text-slate-800 mb-2 text-center print:text-xl">
                   Your Carbon Offset Distribution
                 </h2>
@@ -322,14 +327,14 @@ export default function CheckoutSuccess({
             </motion.div>
           )}
 
-          {/* Impact Comparisons */}
+          {/* Impact Comparisons - Page 3 */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.4 }}
             className="mt-6"
           >
-            <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-3xl p-8 shadow-2xl">
+            <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-3xl p-8 shadow-2xl print:rounded-none print:shadow-none print:bg-white print:border print:border-gray-300 print-page-break">
               <CarbonImpactComparison tons={order.tons} variant="success" count={3} />
             </div>
           </motion.div>