From 1f961b9075f8ae128c41fac09eaa4c38122d4503 Mon Sep 17 00:00:00 2001
From: Prastowo Agung Widodo <prastowoagungwidodo@gmail.com>
Date: Thu, 26 Mar 2026 18:08:20 +0700
Subject: [PATCH] fix: print area should not include sidebar and message list

---
 app/globals.css                   | 31 +++++++++++++++++++++++++++++++
 components/email/email-viewer.tsx |  9 +++++----
 package-lock.json                 |  4 ++--
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 0aeaa4d..105387f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -428,3 +428,34 @@ body {
     -webkit-backdrop-filter: none !important;
   }
 }
+
+@media print {
+  html {
+    --sidebar-width: 0px !important;
+  }
+  body * {
+    visibility: hidden !important;
+  }
+  #email-viewer-container,
+  #email-viewer-container * {
+    visibility: visible !important;
+  }
+  #email-viewer-container {
+    position: fixed !important;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    min-height: 100vh;
+    display: block !important;
+    background: white !important;
+    z-index: 9999;
+    box-shadow: none !important;
+    border: none !important;
+  }
+  #email-content-area {
+    overflow: hidden !important;
+    height: auto !important;
+    display: block !important;
+  }
+}
+
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 2ddba94..bcaa38a 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -691,6 +691,7 @@ export function EmailViewer({
   return (
     <div
       key={email.id}
+      id="email-viewer-container"
       className={cn("flex-1 flex flex-col h-full bg-background overflow-hidden animate-in fade-in duration-300 relative", className)}
     >
       {/* Loading overlay when fetching new email */}
@@ -916,7 +917,7 @@ export function EmailViewer({
               </div>
 
               {/* More Actions Dropdown */}
-              <div className="relative">
+              <div className="relative print:hidden">
                 <Button
                   variant="ghost"
                   size="icon"
@@ -1372,7 +1373,7 @@ export function EmailViewer({
       </div>
 
       {/* Email Content Area */}
-      <div className="flex-1 overflow-auto bg-muted/30">
+      <div id="email-content-area" className="flex-1 overflow-auto bg-muted/30">
         {/* Mobile/Tablet Sender Info - scrolls with content */}
         <div className="lg:hidden bg-background border-b border-border px-4 py-3">
           <div className="flex items-start gap-3">
@@ -1621,7 +1622,7 @@ export function EmailViewer({
 
           {/* Quick Reply Section */}
           <div className={cn(
-            "mt-6 bg-background rounded-lg shadow-sm border transition-all",
+            "print:hidden mt-6 bg-background rounded-lg shadow-sm border transition-all",
             isQuickReplyFocused || quickReplyText ? "border-primary" : "border-border"
           )}>
             <div className="p-4">
@@ -1780,4 +1781,4 @@ export function EmailViewer({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index 01dac78..b888e94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "jmap-webmail",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "jmap-webmail",
-      "version": "1.3.3",
+      "version": "1.4.0",
       "license": "MIT",
       "dependencies": {
         "@tanstack/react-virtual": "^3.13.18",