From 8e659c1ed37522c389eea0fe6ab097403cee461d Mon Sep 17 00:00:00 2001
From: Matthieu MALVACHE <matthieu@ma2t.com>
Date: Fri, 17 Apr 2026 14:32:36 +0200
Subject: [PATCH] fix(print): shrink fixed-width HTML emails to fit on A4

Newsletter-style mail is usually laid out with width="600" or
style="width:640px" tables. On A4 with 12 mm margins the printable
width is closer to 180 mm, so the right edge of the content was
being clipped. Add print rules that cap every element in
#print-overlay to max-width: 100%, let tables auto-layout, and force
long URLs / single words to wrap instead of overflowing. Images,
svgs, videos and canvases also get max-width: 100% with auto height
so they scale down proportionally.
---
 app/globals.css | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/app/globals.css b/app/globals.css
index 506b886..d30b742 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -522,6 +522,43 @@ html.is-printing body > *:not(#print-overlay) {
     background: #fff !important;
   }
 
+  /* Newsletter-style HTML emails are typically laid out with fixed-width
+     tables (width="600" or style="width:640px"). On A4 paper the usable
+     width is around 180mm, so the right edge of the content gets clipped.
+     Force every printed element to shrink to the page width, let tables
+     auto-layout, and encourage long URLs / words to break. */
+  #print-overlay *:not(html):not(body) {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  #print-overlay img,
+  #print-overlay video,
+  #print-overlay canvas,
+  #print-overlay svg {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+  #print-overlay table {
+    max-width: 100% !important;
+    width: auto !important;
+    table-layout: auto !important;
+  }
+  #print-overlay td,
+  #print-overlay th,
+  #print-overlay p,
+  #print-overlay li,
+  #print-overlay pre,
+  #print-overlay code {
+    overflow-wrap: anywhere !important;
+    word-break: break-word !important;
+  }
+  #print-overlay pre {
+    white-space: pre-wrap !important;
+  }
+  #print-overlay .print-inlined-iframe {
+    width: 100% !important;
+  }
+
   #print-overlay a {
     color: #0645ad !important;
     text-decoration: underline !important;