Compare commits

...

2 commits

Author SHA1 Message Date
9a5b293590 chore(embedded): cut v0.0.17-beta
All checks were successful
Notify chart dev on beta cut / notify-chart-dev (push) Successful in 6s
2026-05-13 13:48:52 -05:00
f7f018ca22 fix(pandoc): print CSS — content overflowing the right page margin
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.
2026-05-13 13:48:41 -05:00
9 changed files with 85 additions and 15 deletions

View file

@ -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 */

View file

@ -2470,7 +2470,7 @@ td[data-field="trackingNumber"] {
</svg>
<div class="header-title-group">
<span class="app-header__title">ZDDC Archive</span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e</span></span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:48:41 · f7f018c</span></span>
</div>
<button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
<button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh Data"></button>

View file

@ -1657,7 +1657,7 @@ html, body {
</svg>
<div class="header-title-group">
<span class="app-header__title">ZDDC Browse</span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e</span></span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:48:42 · f7f018c</span></span>
</div>
<button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
<button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh listing" aria-label="Refresh listing"></button>

View file

@ -1681,7 +1681,7 @@ body.help-open .app-header {
</svg>
<div class="header-title-group">
<span class="app-header__title">ZDDC Classifier</span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e</span></span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:48:41 · f7f018c</span></span>
</div>
<button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
<button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh and rescan directory" aria-label="Refresh" style="font-size:1.1rem;"></button>

View file

@ -1424,7 +1424,7 @@ body {
</svg>
<div class="header-title-group">
<span class="app-header__title">ZDDC</span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e</span></span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:48:42 · f7f018c</span></span>
</div>
</div>
<div class="header-right">

View file

@ -2523,7 +2523,7 @@ dialog.modal--narrow {
</svg>
<div class="header-title-group">
<span class="app-header__title">ZDDC Transmittal</span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:10:01 · 0fac49e</span></span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:48:41 · f7f018c</span></span>
</div>
<span id="no-js-notice" class="text-gray-400 text-xs italic">JavaScript not available</span>
<!-- Publish split-button (Transmittal-specific primary action;

View file

@ -1,8 +1,8 @@
# Generated by build.sh — do not edit. One <app>=<build label> per line.
archive=v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e
transmittal=v0.0.17-beta · 2026-05-13 18:10:01 · 0fac49e
classifier=v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e
landing=v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e
form=v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e
tables=v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e
browse=v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e
archive=v0.0.17-beta · 2026-05-13 18:48:41 · f7f018c
transmittal=v0.0.17-beta · 2026-05-13 18:48:41 · f7f018c
classifier=v0.0.17-beta · 2026-05-13 18:48:41 · f7f018c
landing=v0.0.17-beta · 2026-05-13 18:48:42 · f7f018c
form=v0.0.17-beta · 2026-05-13 18:48:42 · f7f018c
tables=v0.0.17-beta · 2026-05-13 18:48:42 · f7f018c
browse=v0.0.17-beta · 2026-05-13 18:48:42 · f7f018c

View file

@ -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 */

View file

@ -1300,7 +1300,7 @@ body.help-open .app-header {
</svg>
<div class="header-title-group">
<span class="app-header__title" id="table-title">ZDDC Table</span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:10:02 · 0fac49e</span></span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-beta · 2026-05-13 18:48:42 · f7f018c</span></span>
</div>
</div>
<div class="header-right">