From eca244e160d3426c2ec80eed346635f9cd1f7aac Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 31 Oct 2025 18:57:55 +0100
Subject: [PATCH] Compress print layout to fit all order info on page 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implement aggressive spacing compression (padding: 0.5rem, margins: 0.25rem)
- Reduce all font sizes by 10-25% for better vertical fit
- Compress line-height to 1.3 for tighter spacing
- Add print-color-adjust: exact to force gradients and colors to print
- Optimize logo, grid gaps, and section spacing
- Keep ALL gradient backgrounds and colorful styling

Result: Payment ID, Status, Email, Date now fit on page 1 with beautiful colors

Based on comprehensive Zen analysis of print layout optimization

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

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

diff --git a/src/pages/CheckoutSuccess.tsx b/src/pages/CheckoutSuccess.tsx
index 512e7e1..25e567a 100644
--- a/src/pages/CheckoutSuccess.tsx
+++ b/src/pages/CheckoutSuccess.tsx
@@ -126,6 +126,13 @@ export default function CheckoutSuccess({
       {/* Print-specific styles */}
       <style>{`
         @media print {
+          /* Force print backgrounds and colors */
+          * {
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+            color-adjust: exact !important;
+          }
+
           /* Hide non-print elements */
           .no-print {
             display: none !important;
@@ -147,46 +154,127 @@ export default function CheckoutSuccess({
           .print-receipt {
             max-width: 100% !important;
             margin: 0 !important;
+            padding: 0.25rem !important;
+          }
+
+          /* Aggressive spacing compression */
+          .p-8, .px-8, .py-8 {
             padding: 0.5rem !important;
           }
 
-          /* Optimize spacing for print */
-          .px-8, .p-8 {
-            padding-left: 0.75rem !important;
-            padding-right: 0.75rem !important;
+          .p-6, .px-6, .py-6 {
+            padding: 0.5rem !important;
           }
 
-          .py-6, .py-8, .p-8 {
-            padding-top: 0.5rem !important;
-            padding-bottom: 0.5rem !important;
+          .p-5 {
+            padding: 0.5rem !important;
           }
 
-          .mb-6, .mb-8 {
-            margin-bottom: 0.5rem !important;
+          .mb-8, .mb-6 {
+            margin-bottom: 0.25rem !important;
           }
 
-          .mt-6, .mt-8 {
-            margin-top: 0.5rem !important;
+          .mt-8, .mt-6 {
+            margin-top: 0.25rem !important;
           }
 
-          /* Slightly reduce font sizes for better fit */
+          .mb-4 {
+            margin-bottom: 0.2rem !important;
+          }
+
+          .mt-4 {
+            margin-top: 0.2rem !important;
+          }
+
+          .mb-2 {
+            margin-bottom: 0.15rem !important;
+          }
+
+          /* Spacing between elements */
+          .space-y-1 > * + * {
+            margin-top: 0.1rem !important;
+          }
+
+          .space-y-3 > * + * {
+            margin-top: 0.2rem !important;
+          }
+
+          .space-y-4 > * + * {
+            margin-top: 0.25rem !important;
+          }
+
+          .gap-3 {
+            gap: 0.25rem !important;
+          }
+
+          .gap-5 {
+            gap: 0.25rem !important;
+          }
+
+          /* Font size optimization */
           .text-4xl {
-            font-size: 1.75rem !important;
+            font-size: 1.25rem !important;
           }
 
           .text-3xl {
-            font-size: 1.5rem !important;
+            font-size: 1.125rem !important;
+          }
+
+          .text-2xl {
+            font-size: 1rem !important;
+          }
+
+          .text-xl {
+            font-size: 0.95rem !important;
+          }
+
+          .text-lg {
+            font-size: 0.9rem !important;
+          }
+
+          .text-base {
+            font-size: 0.875rem !important;
+          }
+
+          .text-sm {
+            font-size: 0.8rem !important;
+          }
+
+          .text-xs {
+            font-size: 0.7rem !important;
+          }
+
+          /* Line height compression */
+          * {
+            line-height: 1.3 !important;
+            animation: none !important;
+            transition: none !important;
+          }
+
+          h1, h2, h3 {
+            line-height: 1.2 !important;
           }
 
           /* Logo sizing */
           .print-logo {
-            max-width: 120px !important;
+            max-width: 100px !important;
+            margin-bottom: 0.25rem !important;
           }
 
-          /* Disable animations for print */
-          * {
-            animation: none !important;
-            transition: none !important;
+          /* Compact grid layouts */
+          .grid {
+            gap: 0.25rem !important;
+          }
+
+          /* Metadata grid - keep 2 columns but more compact */
+          .md\\:grid-cols-2 {
+            display: grid !important;
+            grid-template-columns: 1fr 1fr !important;
+          }
+
+          /* Make single column items span only 1 column in print */
+          .md\\:col-span-2 {
+            grid-column: span 1 !important;
           }
         }
       `}</style>