matt/puffin-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make receipt page responsive and add print page breaks
All checks were successful
Build and Push Docker Images / docker (push) Successful in 58s
Details

Browse Source 
- 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>
This commit is contained in:
Matt 2025-10-31 18:06:23 +01:00
parent 69e1465f69
commit 3273d4af2a
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/CheckoutSuccess.tsx
View File

@ -141,21 +141,26 @@ export default function CheckoutSuccess({
.print-logo { .print-logo {
max-width: 200px !important; max-width: 200px !important;
} }
.print-page-break {
page-break-after: always !important;
break-after: page !important;
}
@page { @page {
margin: 0.5in; margin: 0.5in;
size: letter;
} }
} }
`}</style> `}</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 <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }} 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 */} {/* Receipt Container - Page 1 */}
<div className="bg-white rounded-3xl shadow-2xl overflow-hidden"> <div className="bg-white rounded-3xl shadow-2xl overflow-hidden print:rounded-none print:shadow-none print-page-break">
{/* Header with Logo */} {/* Header with Logo */}
<motion.div <motion.div
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
@ -298,7 +303,7 @@ export default function CheckoutSuccess({
</motion.div> </motion.div>
</div> </div>
{/* Portfolio Distribution Chart */} {/* Portfolio Distribution Chart - Page 2 */}
{orderDetails.order.portfolio?.projects && orderDetails.order.portfolio.projects.length > 0 && ( {orderDetails.order.portfolio?.projects && orderDetails.order.portfolio.projects.length > 0 && (
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@ -306,7 +311,7 @@ export default function CheckoutSuccess({
transition={{ delay: 0.35 }} transition={{ delay: 0.35 }}
className="mt-6" 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"> <h2 className="text-2xl font-bold text-slate-800 mb-2 text-center print:text-xl">
Your Carbon Offset Distribution Your Carbon Offset Distribution
</h2> </h2>
@ -322,14 +327,14 @@ export default function CheckoutSuccess({
</motion.div> </motion.div>
)} )}
{/* Impact Comparisons */} {/* Impact Comparisons - Page 3 */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }} transition={{ delay: 0.4 }}
className="mt-6" 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} /> <CarbonImpactComparison tons={order.tons} variant="success" count={3} />
</div> </div>
</motion.div> </motion.div>