From f7f018ca22dac3600dcc2d5141cbfcd090da5267 Mon Sep 17 00:00:00 2001
From: ZDDC <caseywitt@proton.me>
Date: Wed, 13 May 2026 13:48:41 -0500
Subject: [PATCH] =?UTF-8?q?fix(pandoc):=20print=20CSS=20=E2=80=94=20conten?=
 =?UTF-8?q?t=20overflowing=20the=20right=20page=20margin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The HTML→PDF path produced PDFs where content extended past the
right margin of each letter page. Two contributing causes in
viewer-template.html's @media print rules:

1. .content-wrapper carries max-width: min(900px, 100%) from the
   screen layout. The print override set width: 100% but didn't reset
   max-width. Chromium's --print-to-pdf renders at the full page
   width (816px for letter at 96dpi) and only clips at print time,
   so without max-width: none the element actually extends past the
   ~624px printable area.

2. Tables, preformatted blocks, and long URLs had no print
   containment. A wide <pre> or a <table> with many columns would
   blow out the right edge even when the parent constraints held.

Fixes applied to @media print:

  - html, body, .app-container: explicit width: 100% + max-width: 100%
    to be sure the print viewport flows top-down with no horizontal
    creep at the layout root.
  - .content-wrapper: max-width: none + width: 100% (was just width).
  - .content-page: width: 100% added (was just max-width: none).
  - .document-content: max-width: 100% + box-sizing: border-box so
    the existing 0.5in horizontal padding stays inside the page.
  - pre/code/table/blockquote/img/video: max-width: 100% +
    overflow-wrap: break-word; <pre> additionally white-space:
    pre-wrap + word-break: break-word so unbreakable token runs
    (URLs, paths, command lines) wrap instead of overflowing.
  - table: table-layout: fixed so columns shrink to fit rather than
    forcing horizontal scroll/overflow.

Both source files (pandoc/viewer-template.html and the embed copy at
zddc/internal/convert/viewer-template.html) updated and verified
identical with diff -q.
---
 pandoc/viewer-template.html                | 37 +++++++++++++++++++++-
 zddc/internal/convert/viewer-template.html | 37 +++++++++++++++++++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/pandoc/viewer-template.html b/pandoc/viewer-template.html
index eaf5464..f64acd8 100644
--- a/pandoc/viewer-template.html
+++ b/pandoc/viewer-template.html
@@ -577,17 +577,33 @@ th, td {
   }
 
   /* Layout adjustments */
+  html, body {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+  }
+
   .app-container {
     display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
   }
-  
+
   .content-wrapper {
     margin-left: 0 !important;
     width: 100% !important;
+    /* The screen layout caps content-wrapper at 900px; in print, the
+       printable area is page-width minus @page margins (~6.5in =
+       ~624px for letter at 96dpi), which is narrower than 900px BUT
+       chromium's --print-to-pdf renders at the full page width and
+       only clips at print time — so without max-width:none the
+       element extends past the right margin. */
+    max-width: none !important;
   }
 
   .content-page {
     max-width: none !important;
+    width: 100% !important;
     padding: 0 !important;
   }
 
@@ -597,6 +613,25 @@ th, td {
     padding: 0 0.5in !important;
     border-left: none !important;
     min-height: calc(100vh - 130pt) !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Wide content that wouldn't otherwise wrap: tables, code blocks,
+     long URLs in inline code. Force them to stay within the
+     printable area instead of running off the right edge. */
+  pre, code, table, blockquote, img, video {
+    max-width: 100% !important;
+    overflow-wrap: break-word !important;
+    word-wrap: break-word !important;
+  }
+  pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+  }
+  table {
+    table-layout: fixed !important;
+    width: 100% !important;
   }
 
   /* Fix list formatting in print */
diff --git a/zddc/internal/convert/viewer-template.html b/zddc/internal/convert/viewer-template.html
index eaf5464..f64acd8 100644
--- a/zddc/internal/convert/viewer-template.html
+++ b/zddc/internal/convert/viewer-template.html
@@ -577,17 +577,33 @@ th, td {
   }
 
   /* Layout adjustments */
+  html, body {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+  }
+
   .app-container {
     display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
   }
-  
+
   .content-wrapper {
     margin-left: 0 !important;
     width: 100% !important;
+    /* The screen layout caps content-wrapper at 900px; in print, the
+       printable area is page-width minus @page margins (~6.5in =
+       ~624px for letter at 96dpi), which is narrower than 900px BUT
+       chromium's --print-to-pdf renders at the full page width and
+       only clips at print time — so without max-width:none the
+       element extends past the right margin. */
+    max-width: none !important;
   }
 
   .content-page {
     max-width: none !important;
+    width: 100% !important;
     padding: 0 !important;
   }
 
@@ -597,6 +613,25 @@ th, td {
     padding: 0 0.5in !important;
     border-left: none !important;
     min-height: calc(100vh - 130pt) !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Wide content that wouldn't otherwise wrap: tables, code blocks,
+     long URLs in inline code. Force them to stay within the
+     printable area instead of running off the right edge. */
+  pre, code, table, blockquote, img, video {
+    max-width: 100% !important;
+    overflow-wrap: break-word !important;
+    word-wrap: break-word !important;
+  }
+  pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+  }
+  table {
+    table-layout: fixed !important;
+    width: 100% !important;
   }
 
   /* Fix list formatting in print */