From c23b93bef2a1fe90ff81997ba0d920e7a922a7d8 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Thu, 20 Nov 2025 19:37:50 +0000
Subject: [PATCH] Reduce printable QR code page size to fit on single page

---
 src/pages/PrintableQRCodePage.tsx | 43 +++++++++++++++----------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/pages/PrintableQRCodePage.tsx b/src/pages/PrintableQRCodePage.tsx
index 7286767..959b947 100644
--- a/src/pages/PrintableQRCodePage.tsx
+++ b/src/pages/PrintableQRCodePage.tsx
@@ -120,24 +120,24 @@ export function PrintableQRCodePage() {
       </div>
 
       {/* Printable Content */}
-      <div id="printable-qr-code" className="max-w-4xl mx-auto">
-        <div className="bg-white rounded-lg shadow-md p-12">
+      <div id="printable-qr-code" className="max-w-3xl mx-auto">
+        <div className="bg-white rounded-lg shadow-md p-8">
           {/* Header */}
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">
+          <div className="text-center mb-4">
+            <h1 className="text-2xl font-bold text-gray-900 mb-1">
               Event Check-In QR Code
             </h1>
-            <p className="text-gray-600">
+            <p className="text-sm text-gray-600">
               Litter Scouts - Beach Cleanup Events
             </p>
           </div>
 
           {/* QR Code */}
-          <div className="flex justify-center mb-8">
-            <div className="p-8 bg-white border-4 border-gray-200 rounded-lg">
+          <div className="flex justify-center mb-4">
+            <div className="p-4 bg-white border-4 border-gray-200 rounded-lg">
               <QRCodeSVG
                 value={qrData}
-                size={300}
+                size={240}
                 level="H"
                 includeMargin={true}
               />
@@ -145,42 +145,42 @@ export function PrintableQRCodePage() {
           </div>
 
           {/* User Info */}
-          <div className="text-center mb-8">
-            <div className="inline-flex items-center justify-center mb-4">
+          <div className="text-center mb-4">
+            <div className="inline-flex items-center justify-center mb-2">
               {user.imageUrl && (
                 <img
                   src={user.imageUrl}
                   alt={user.fullName || user.username || 'User'}
-                  className="w-16 h-16 rounded-full border-2 border-gray-300"
+                  className="w-12 h-12 rounded-full border-2 border-gray-300"
                 />
               )}
             </div>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-1">
+            <h2 className="text-xl font-semibold text-gray-900 mb-0.5">
               {user.fullName || user.username || 'User'}
             </h2>
-            <p className="text-gray-600">@{user.username}</p>
+            <p className="text-sm text-gray-600">@{user.username}</p>
           </div>
 
           {/* Instructions */}
-          <div className="border-t border-gray-200 pt-6">
-            <h3 className="text-lg font-semibold text-gray-900 mb-3 text-center">
+          <div className="border-t border-gray-200 pt-4">
+            <h3 className="text-base font-semibold text-gray-900 mb-2 text-center">
               How to Use
             </h3>
-            <div className="space-y-2 text-gray-700">
+            <div className="space-y-1.5 text-sm text-gray-700">
               <div className="flex items-start">
-                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm mr-3 flex-shrink-0 mt-0.5">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
                   1
                 </span>
                 <p>Bring this QR code to any Litter Scouts cleanup event</p>
               </div>
               <div className="flex items-start">
-                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm mr-3 flex-shrink-0 mt-0.5">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
                   2
                 </span>
                 <p>Show it to the event organizer for quick check-in</p>
               </div>
               <div className="flex items-start">
-                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm mr-3 flex-shrink-0 mt-0.5">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
                   3
                 </span>
                 <p>Your attendance will be automatically recorded</p>
@@ -189,9 +189,8 @@ export function PrintableQRCodePage() {
           </div>
 
           {/* Footer */}
-          <div className="mt-8 pt-6 border-t border-gray-200 text-center text-sm text-gray-500">
-            <p>This QR code is unique to your account</p>
-            <p className="mt-1">Keep it safe and don't share with others</p>
+          <div className="mt-4 pt-4 border-t border-gray-200 text-center text-xs text-gray-500">
+            <p>This QR code is unique to your account - Keep it safe and don't share with others</p>
           </div>
         </div>
       </div>