fix: print area should not include sidebar and message list

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;
+  }
+}
+

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>
   );
-}
+}