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
This commit is contained in:
Dwindi Ramadhana
2026-01-06 21:06:28 +07:00
parent 1cef11a1d2
commit 2b94f26cae
2 changed files with 60 additions and 19 deletions

View File

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

View File

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