From 2b94f26cae9bad5c97564dbb83dda6a9028ddd44 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Tue, 6 Jan 2026 21:06:28 +0700
Subject: [PATCH] fix: Invoice print layout - hide app shell, fix padding

Print CSS:
- Hide WooNooW app nav, header, submenu, bottom nav
- Set print-a4 to absolute positioning for clean print
- Added 15mm padding for print
- Hidden min-height for screen container

Invoice Component:
- Removed inline minHeight to prevent empty second page
- Added max-w-3xl and p-8 for screen display
- Added print:max-w-none print:p-0 for print mode
---
 admin-spa/src/index.css                 | 65 ++++++++++++++++++++++---
 admin-spa/src/routes/Orders/Invoice.tsx | 14 ++----
 2 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/admin-spa/src/index.css b/admin-spa/src/index.css
index ad94136..1e7e56c 100644
--- a/admin-spa/src/index.css
+++ b/admin-spa/src/index.css
@@ -160,26 +160,75 @@
     display: none !important;
   }
 
+  /* Hide WooNooW app shell (nav, header, submenu, bottom nav, etc) */
+  .woonoow-app-header,
+  .woonoow-topnav,
+  .woonoow-bottom-nav,
+  .woonoow-submenu,
+  nav,
+  header,
+  [data-nav],
+  [data-header],
+  .no-print {
+    display: none !important;
+  }
+
   /* Reset layout to full-bleed for our app */
   html,
   body,
   #wpwrap,
-  #wpcontent {
+  #wpcontent,
+  #woonoow-admin-app,
+  #woonoow-admin-app>div,
+  .woonoow-app {
     background: #fff !important;
     margin: 0 !important;
     padding: 0 !important;
+    max-width: none !important;
+    width: 100% !important;
+    min-height: auto !important;
+    overflow: visible !important;
   }
 
-  #woonoow-admin-app,
-  #woonoow-admin-app>div {
+  /* Ensure print content is visible and takes full page */
+  .print-a4 {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    min-height: auto !important;
+    height: auto !important;
+    padding: 15mm !important;
     margin: 0 !important;
-    padding: 0 !important;
-    max-width: 100% !important;
+    box-shadow: none !important;
+    background: white !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
   }
 
-  /* Hide elements flagged as no-print, reveal print-only */
-  .no-print {
-    display: none !important;
+  .print-a4 * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Ensure backgrounds print */
+  .print-a4 .bg-gray-50 {
+    background-color: #f9fafb !important;
+  }
+
+  .print-a4 .bg-gray-900 {
+    background-color: #111827 !important;
+  }
+
+  .print-a4 .text-white {
+    color: white !important;
+  }
+
+  /* Hide outer container styling */
+  .min-h-screen {
+    min-height: auto !important;
+    background: white !important;
+    padding: 0 !important;
   }
 
   .print-only {
diff --git a/admin-spa/src/routes/Orders/Invoice.tsx b/admin-spa/src/routes/Orders/Invoice.tsx
index a89c2ef..eba0a48 100644
--- a/admin-spa/src/routes/Orders/Invoice.tsx
+++ b/admin-spa/src/routes/Orders/Invoice.tsx
@@ -87,16 +87,8 @@ export default function Invoice() {
             </div>
 
             {/* Invoice content */}
-            <div className="py-8 print:py-0">
-                <div
-                    className="print-a4 bg-white shadow-lg print:shadow-none mx-auto"
-                    style={{
-                        width: '210mm',
-                        minHeight: '297mm',
-                        padding: '20mm',
-                        boxSizing: 'border-box'
-                    }}
-                >
+            <div className="py-8 print:py-0 print:bg-white">
+                <div className="print-a4 bg-white shadow-lg print:shadow-none mx-auto max-w-3xl p-8 print:max-w-none print:p-0">
                     {/* Invoice Header */}
                     <div className="flex items-start justify-between mb-8 pb-6 border-b-2 border-gray-200">
                         <div>
@@ -214,6 +206,6 @@ export default function Invoice() {
                     </div>
                 </div>
             </div>
-        </div>
+        </div >
     );
 }