fix sticker rendering

app.js

@@ -244,28 +244,30 @@ async function generatePDF() {
 
     // Capture the sticker as an image
     const canvas = await html2canvas(stickerElement, {
-        scale: 3,
+        scale: 4,
         backgroundColor: '#ffffff',
         useCORS: true,
         logging: false
     });
 
-    // Create PDF with sticker dimensions
+    // Create PDF with A4 dimensions
     const imgData = canvas.toDataURL('image/png');
 
-    const pdfWidth = 100; // mm
-    const pdfHeight = (canvas.height / canvas.width) * pdfWidth;
-
     const pdf = new jsPDF({
-        orientation: pdfHeight > pdfWidth ? 'portrait' : 'landscape',
+        orientation: 'portrait',
         unit: 'mm',
-        format: [pdfWidth + 10, pdfHeight + 10]
+        format: 'a4'
     });
 
-    const x = 5;
-    const y = 5;
+    // Sticker size on A4 (approximately 55mm wide)
+    const stickerWidth = 55;
+    const stickerHeight = (canvas.height / canvas.width) * stickerWidth;
 
-    pdf.addImage(imgData, 'PNG', x, y, pdfWidth, pdfHeight);
+    // Position at top-left with small margin
+    const x = 10;
+    const y = 10;
+
+    pdf.addImage(imgData, 'PNG', x, y, stickerWidth, stickerHeight);
 
     // Generate filename
     const regNumber = regNumberInput.value || 'sticker';

templates/rs-auto.css

@@ -1,7 +1,7 @@
 /* RS AUTO Template Styles */
 .sticker-rs-auto {
     width: 280px;
-    border: 3px solid #000;
+    border: 1px solid #000;
     font-family: Arial, sans-serif;
     font-size: 11px;
     background: #fff;
@@ -12,65 +12,64 @@
     background-color: #000;
     color: #fff;
     text-align: center;
-    padding: 6px 8px;
-    font-size: 18px;
+    padding: 4px 8px;
+    font-size: 16px;
     font-weight: bold;
-    letter-spacing: 4px;
+    letter-spacing: 6px;
 }
 
 .sticker-rs-auto .sticker-barcode-row {
     display: flex;
     align-items: center;
-    border-bottom: 2px solid #000;
-    padding: 4px 8px;
-    gap: 8px;
+    border-bottom: 1px solid #000;
+    padding: 2px 0 2px 6px;
+    gap: 6px;
+    background: #fff;
 }
 
 .sticker-rs-auto .sticker-barcode-row .barcode-number {
     font-size: 11px;
-    font-weight: 500;
+    font-weight: bold;
 }
 
 .sticker-rs-auto .sticker-barcode-row .barcode {
-    height: 30px;
+    height: 24px;
     flex: 1;
 }
 
 .sticker-rs-auto .sticker-body {
     display: flex;
-    border-bottom: 2px solid #000;
+    border-bottom: 1px solid #000;
 }
 
 .sticker-rs-auto .sticker-info {
     flex: 1;
-    padding: 6px 8px;
+    padding: 4px 6px;
     font-size: 10px;
-    line-height: 1.4;
+    line-height: 1.3;
+    border-right: 1px solid #000;
 }
 
 .sticker-rs-auto .sticker-info .date-row {
-    margin-bottom: 2px;
+    margin-bottom: 0;
 }
 
 .sticker-rs-auto .sticker-logo {
-    width: 100px;
-    border-left: 2px solid #000;
+    width: 85px;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 4px;
 }
 
 .sticker-rs-auto .sticker-logo .logo-svg,
 .sticker-rs-auto .sticker-logo .logo-img {
-    width: 90px;
-    height: 90px;
-    object-fit: contain;
+    width: 100%;
+    height: auto;
 }
 
 .sticker-rs-auto .sticker-footer {
     text-align: center;
-    padding: 4px 8px;
+    padding: 3px 8px;
     font-size: 10px;
-    font-weight: 500;
+    font-weight: bold;
 }

templates/rs-auto.html

@@ -16,7 +16,7 @@
             <div>{{engineCapacity}}</div>
         </div>
         <div class="sticker-logo">
-            <img src="templates/rs-auto.svg" alt="RS AUTO" class="logo-img">
+            <img src="templates/rs-auto.png" alt="RS AUTO" class="logo-img">
         </div>
     </div>
     <div class="sticker-footer">RS AUTO, TEL: 775 8999</div>