From 1d08f16f736c51874ff5f77364f17a72a76be877 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Tue, 23 Jun 2026 13:53:32 +0000
Subject: [PATCH] fix: explicit css media queries for printing to prevent blank
 pages

---
 App.tsx   |  6 +++---
 index.css | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/App.tsx b/App.tsx
index bafcef6..05a51c2 100644
--- a/App.tsx
+++ b/App.tsx
@@ -125,8 +125,8 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen print:bg-white print:m-0 print:p-0">
-      <div className="print:hidden">
+    <div className="min-h-screen">
+      <div className="app-main-content">
         {isLoading && <Loader />}
         <Header onReset={handleReset} onClearKey={handleClearKey} hasKey={hasKey} provider={provider} />
 
@@ -201,7 +201,7 @@ const App: React.FC = () => {
       </div>
 
       {reportsData && (
-        <div className="hidden print:block print:w-[210mm] print:mx-auto" aria-hidden="true">
+        <div className="app-print-wrapper">
           <PrintableReport reports={reportsData} />
         </div>
       )}
diff --git a/index.css b/index.css
index 9baa718..c95b06d 100644
--- a/index.css
+++ b/index.css
@@ -30,6 +30,13 @@
   animation: fade-in 0.5s ease-out forwards;
 }
 
+/* Screen specific rules */
+@media screen {
+  .app-print-wrapper {
+    display: none !important;
+  }
+}
+
 /* High-quality native browser printing */
 @media print {
   * {
@@ -37,9 +44,19 @@
     print-color-adjust: exact !important;
   }
   
+  .app-main-content {
+    display: none !important;
+  }
+  
+  .app-print-wrapper {
+    display: block !important;
+    position: relative !important;
+    width: 100% !important;
+  }
+  
   @page {
     margin: 0;
-    size: A4;
+    size: A4 portrait;
   }
 
   body {