fix: double printing issue

index.html

@@ -281,7 +281,7 @@
                     </div>
                 </form>
             </div>
-            <div id="preview-container" class="w-full lg:w-1/2">
+            <div id="preview-container" class="w-full lg:w-1/2 hidden lg:block">
                 <div
                     id="quotation-preview"
                     class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"

script.js

@@ -264,9 +264,18 @@ if (typeof document !== "undefined") {
             return html;
         }
 
+        function generateQuotationHTMLForPreview(form) {
+            const html = generateQuotationHTML(form);
+            // Remove print button from preview
+            return html.replace(
+                /<button[^>]*onclick="window\.print\(\)"[^>]*>.*?<\/button>/s,
+                "",
+            );
+        }
+
         function updatePreview() {
             const form = document.getElementById("quotation-form");
-            const html = generateQuotationHTML(form);
+            const html = generateQuotationHTMLForPreview(form);
             previewContent.innerHTML = html;
         }
 
@@ -528,6 +537,9 @@ if (typeof document !== "undefined") {
             const html = generateQuotationHTML(form);
             quotationContent.innerHTML = html;
             output.classList.remove("hidden");
+
+            // Add print-only class to modal for better print isolation
+            output.classList.add("print-modal");
         });
 
         document

style.css

@@ -42,16 +42,19 @@
     max-width: 800px;
     margin: auto;
     border: 1px solid #000;
-    padding: 20px;
+    padding: 15px;
+    font-size: 12px;
+    line-height: 1.3;
 }
 
 .quotation-print h2 {
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+    font-size: 18px;
 }
 
 .quotation-print .section {
-    margin-bottom: 15px;
+    margin-bottom: 8px;
 }
 
 .totals table {
@@ -68,11 +71,11 @@
 
 .disclaimer {
     color: #555;
-    margin-top: 20px;
-    font-size: 10px;
+    margin-top: 10px;
+    font-size: 8px;
     text-align: justify;
     border-top: 1px solid #000;
-    padding-top: 10px;
+    padding-top: 5px;
 }
 
 .quote-meta {
@@ -87,14 +90,14 @@
 
 .company-details h1 {
     margin: 0;
-    font-size: 24px;
+    font-size: 18px;
     color: #036;
     font-family: Arial, Helvetica, sans-serif;
 }
 
 .quotation-title h1 {
     margin: 0;
-    font-size: 24px;
+    font-size: 18px;
     color: #036;
     text-align: right;
 }
@@ -111,20 +114,22 @@
 
 .customer-info {
     border: 1px solid #000;
-    padding: 10px;
-    margin-bottom: 20px;
+    padding: 8px;
+    margin-bottom: 10px;
+    font-size: 11px;
 }
 
 .items-table-print {
     width: 100%;
     border-collapse: collapse;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+    font-size: 10px;
 }
 
 .items-table-print th,
 .items-table-print td {
     border: 1px solid #000;
-    padding: 8px;
+    padding: 4px;
     text-align: left;
 }
 
@@ -133,17 +138,19 @@
 }
 
 .footer {
-    margin-top: 20px;
+    margin-top: 10px;
 }
 
 .notes-and-total {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 5px;
 }
 
 .notes {
     width: 60%;
-    font-size: 12px;
+    font-size: 10px;
+    line-height: 1.2;
 }
 
 .totals {
@@ -156,8 +163,9 @@
 
 .thank-you {
     text-align: center;
-    margin-top: 20px;
+    margin-top: 10px;
     font-weight: bold;
+    font-size: 12px;
 }
 
 @media print {
@@ -170,18 +178,21 @@
 
     @page {
         size: a4;
-        margin: 10mm;
+        margin: 8mm;
     }
 
     body {
-        font-size: 12pt;
+        font-size: 10pt;
+        line-height: 1.2;
     }
 
     .quotation-print {
         max-width: 100%;
-        padding: 20px;
+        padding: 10px;
         margin: auto;
         border: 1px solid #000;
+        font-size: 10px;
+        line-height: 1.2;
     }
 
     .items-table-print,
@@ -202,4 +213,35 @@
     button {
         display: none;
     }
+
+    /* Hide all content except the print modal during printing */
+    body > *:not(.print-modal) {
+        display: none !important;
+    }
+
+    /* Show only the print modal content */
+    .print-modal {
+        display: block !important;
+        position: static !important;
+        z-index: auto !important;
+        background: white !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    .print-modal > div {
+        max-width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        box-shadow: none !important;
+        background: white !important;
+    }
+
+    /* Ensure single page printing */
+    .print-modal .quotation-print {
+        page-break-after: avoid !important;
+        page-break-before: avoid !important;
+        margin: 0 !important;
+        padding: 8px !important;
+    }
 }