starred/jmap-webmail
1
0
Fork 0
mirror of https://github.com/root-fr/jmap-webmail.git synced 2026-09-27 08:01:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(print): restrict print area to the email viewer

Browse Source 
The print output was capturing the entire window, so portrait pages
only showed the sidebar and message list. Scope the print rendering
with a @media print block that hides everything, then re-reveals the
#email-viewer-container subtree and positions it full-page. Add
print:hidden to the More Actions dropdown and the Quick Reply section
so they don't appear in the printed output.

Credits #55 (@prastowoagungwidodo).
This commit is contained in:
Prastowo aGung Widodo
2026-04-16 23:03:25 +02:00
committed by Matthieu MALVACHE
parent e12bf45e84
commit 3c1a4496f9
2 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+27
View File
@@ -428,3 +428,30 @@ body {
-webkit-backdrop-filter: none !important;
}
}
@media print {
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
+4 -3
View File
@@ -680,6 +680,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 */}
@@ -905,7 +906,7 @@ export function EmailViewer({
</div>
{/* More Actions Dropdown */}
<div className="relative">
<div className="relative print:hidden">
<Button
variant="ghost"
size="icon"
@@ -1361,7 +1362,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">
@@ -1610,7 +1611,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">