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

Compress print layout to fit all order info on page 1
All checks were successful
Build and Push Docker Images / docker (push) Successful in 1m1s
Details

Browse Source 
- 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>
This commit is contained in:
Matt 2025-10-31 18:57:55 +01:00
parent 6617f06987
commit eca244e160
1 changed files with 107 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/pages/CheckoutSuccess.tsx
View File

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