update pdf

app/scripts/export-pdf.mjs

@@ -239,6 +239,61 @@ async function main() {
       }
       await page.emulateMedia({ media: 'print' });
 
+      // Enforce responsive sizing for SVG/iframes by removing hard attrs and injecting CSS (top-level and inside same-origin iframes)
+      try {
+        await page.evaluate(() => {
+          function isSmallSvg(svg){
+            try {
+              const vb = svg && svg.viewBox && svg.viewBox.baseVal ? svg.viewBox.baseVal : null;
+              if (vb && vb.width && vb.height && vb.width <= 50 && vb.height <= 50) return true;
+              const r = svg.getBoundingClientRect && svg.getBoundingClientRect();
+              if (r && r.width && r.height && r.width <= 50 && r.height <= 50) return true;
+            } catch {}
+            return false;
+          }
+          function lockSmallSvgSize(svg){
+            try {
+              const r = svg.getBoundingClientRect ? svg.getBoundingClientRect() : null;
+              const w = (r && r.width) ? Math.round(r.width) : null;
+              const h = (r && r.height) ? Math.round(r.height) : null;
+              if (w) svg.style.setProperty('width', w + 'px', 'important');
+              if (h) svg.style.setProperty('height', h + 'px', 'important');
+              svg.style.setProperty('max-width', 'none', 'important');
+            } catch {}
+          }
+          function fixSvg(svg){
+            if (!svg) return;
+            if (isSmallSvg(svg)) { lockSmallSvgSize(svg); return; }
+            try { svg.removeAttribute('width'); } catch {}
+            try { svg.removeAttribute('height'); } catch {}
+            svg.style.maxWidth = '100%';
+            svg.style.width = '100%';
+            svg.style.height = 'auto';
+            if (!svg.getAttribute('preserveAspectRatio')) svg.setAttribute('preserveAspectRatio','xMidYMid meet');
+          }
+          document.querySelectorAll('svg').forEach(fixSvg);
+          document.querySelectorAll('.mermaid, .mermaid svg').forEach((el)=>{
+            if (el.tagName && el.tagName.toLowerCase() === 'svg') fixSvg(el);
+            else { el.style.display='block'; el.style.width='100%'; el.style.maxWidth='100%'; }
+          });
+          document.querySelectorAll('iframe, embed, object').forEach((el) => {
+            el.style.width = '100%';
+            el.style.maxWidth = '100%';
+            try { el.removeAttribute('width'); } catch {}
+            // Best-effort inject into same-origin frames
+            try {
+              const doc = (el.tagName.toLowerCase()==='object' ? el.contentDocument : el.contentDocument);
+              if (doc && doc.head) {
+                const s = doc.createElement('style');
+                s.textContent = 'html,body{overflow-x:hidden;} svg,canvas,img,video{max-width:100%!important;height:auto!important;} svg[width]{width:100%!important}';
+                doc.head.appendChild(s);
+                doc.querySelectorAll('svg').forEach((svg)=>{ if (isSmallSvg(svg)) lockSmallSvgSize(svg); else fixSvg(svg); });
+              }
+            } catch (_) { /* cross-origin; ignore */ }
+          });
+        });
+      } catch {}
+
       // Generate OG thumbnail (1200x630)
       try {
         const ogW = 1200, ogH = 630;
@@ -281,13 +336,84 @@ async function main() {
         await page.evaluate(() => { window.scrollTo(0, 0); window.dispatchEvent(new Event('resize')); });
         try { await waitForD3(page, 8000); } catch {}
         await waitForStableLayout(page);
+        // Re-apply responsive fixes after viewport change
+        try {
+          await page.evaluate(() => {
+            function isSmallSvg(svg){
+              try {
+                const vb = svg && svg.viewBox && svg.viewBox.baseVal ? svg.viewBox.baseVal : null;
+                if (vb && vb.width && vb.height && vb.width <= 50 && vb.height <= 50) return true;
+                const r = svg.getBoundingClientRect && svg.getBoundingClientRect();
+                if (r && r.width && r.height && r.width <= 50 && r.height <= 50) return true;
+              } catch {}
+              return false;
+            }
+            function lockSmallSvgSize(svg){
+              try {
+                const r = svg.getBoundingClientRect ? svg.getBoundingClientRect() : null;
+                const w = (r && r.width) ? Math.round(r.width) : null;
+                const h = (r && r.height) ? Math.round(r.height) : null;
+                if (w) svg.style.setProperty('width', w + 'px', 'important');
+                if (h) svg.style.setProperty('height', h + 'px', 'important');
+                svg.style.setProperty('max-width', 'none', 'important');
+              } catch {}
+            }
+            function fixSvg(svg){
+              if (!svg) return;
+              if (isSmallSvg(svg)) { lockSmallSvgSize(svg); return; }
+              try { svg.removeAttribute('width'); } catch {}
+              try { svg.removeAttribute('height'); } catch {}
+              svg.style.maxWidth = '100%';
+              svg.style.width = '100%';
+              svg.style.height = 'auto';
+              if (!svg.getAttribute('preserveAspectRatio')) svg.setAttribute('preserveAspectRatio','xMidYMid meet');
+            }
+            document.querySelectorAll('svg').forEach((svg)=>{ if (isSmallSvg(svg)) lockSmallSvgSize(svg); else fixSvg(svg); });
+            document.querySelectorAll('.mermaid, .mermaid svg').forEach((el)=>{
+              if (el.tagName && el.tagName.toLowerCase() === 'svg') fixSvg(el);
+              else { el.style.display='block'; el.style.width='100%'; el.style.maxWidth='100%'; }
+            });
+            document.querySelectorAll('iframe, embed, object').forEach((el) => {
+              el.style.width = '100%';
+              el.style.maxWidth = '100%';
+              try { el.removeAttribute('width'); } catch {}
+              try {
+                const doc = (el.tagName.toLowerCase()==='object' ? el.contentDocument : el.contentDocument);
+                if (doc && doc.head) {
+                  const s = doc.createElement('style');
+                  s.textContent = 'html,body{overflow-x:hidden;} svg,canvas,img,video{max-width:100%!important;height:auto!important;} svg[width]{width:100%!important}';
+                  doc.head.appendChild(s);
+                  doc.querySelectorAll('svg').forEach((svg)=>{ if (isSmallSvg(svg)) lockSmallSvgSize(svg); else fixSvg(svg); });
+                }
+              } catch (_) {}
+            });
+          });
+        } catch {}
       } catch {}
-      // Temporarily make D3 banner reliably visible for PDF
+      // Temporarily enforce print-safe responsive sizing (SVG/iframes) and improve banner visibility
       let pdfCssHandle = null;
       try {
         pdfCssHandle = await page.addStyleTag({ content: `
+          /* General container safety */
+          html, body { overflow-x: hidden !important; }
+
+          /* Make all vector/bitmap media responsive for print */
+          svg, canvas, img, video { max-width: 100% !important; height: auto !important; }
+          /* Mermaid diagrams */
+          .mermaid, .mermaid svg { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; }
+          /* Any explicit width attributes */
+          svg[width] { width: 100% !important; }
+          /* Iframes and similar embeds */
+          iframe, embed, object { width: 100% !important; max-width: 100% !important; height: auto; }
+
+          /* HtmlEmbed wrappers (defensive) */
+          .html-embed, .html-embed__card { max-width: 100% !important; width: 100% !important; }
+          .html-embed__card > div[id^="frag-"] { width: 100% !important; max-width: 100% !important; }
+
+          /* Banner centering & visibility */
           .hero .points { mix-blend-mode: normal !important; }
-          .d3-galaxy svg { background: var(--surface-bg); }
+          .d3-galaxy { width: 100% !important; height: 300px; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
+          .d3-galaxy svg { background: var(--surface-bg); width: 100% !important; height: auto !important; }
         ` });
       } catch {}
       await page.pdf({

app/src/components/Hero.astro

@@ -57,7 +57,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
         <p>{published}</p>
       </div>
     )}
-    <div class="meta-container-cell">
+    <div class="meta-container-cell meta-container-cell--pdf">
       <h3>PDF</h3>
       <p><button id="download-pdf-btn" data-pdf-filename={pdfFilename}>Download PDF</button></p>
     </div>
@@ -99,6 +99,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   .meta-container-cell { display: flex; flex-direction: column; gap: 8px; }
   .meta-container-cell h3 { margin: 0; font-size: 12px; font-weight: 400; color: var(--muted-color); text-transform: uppercase; letter-spacing: .02em; }
   .meta-container-cell p { margin: 0; }
+  @media print { .meta-container-cell--pdf { display: none !important; } }
 </style>
 
 

app/src/components/HtmlEmbed.astro

@@ -102,7 +102,20 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
     .html-embed__card > div[id^="frag-"] { width: 100% !important; }
   }
   @media print {
+    /* Avoid breaks inside embeds */
     .html-embed, .html-embed__card { break-inside: avoid; page-break-inside: avoid; }
+    /* Constrain width and scale inner content */
+    .html-embed, .html-embed__card { max-width: 100% !important; width: 100% !important; }
+    .html-embed__card { padding: 6px; }
+    .html-embed__card.is-frameless { padding: 0; }
+    .html-embed__card svg,
+    .html-embed__card canvas,
+    .html-embed__card img,
+    .html-embed__card video,
+    .html-embed__card iframe { max-width: 100% !important; height: auto !important; }
+    .html-embed__card > div[id^="frag-"] { width: 100% !important; max-width: 100% !important; }
+    /* Center and constrain the banner (galaxy) when printing */
+    .html-embed .d3-galaxy { width: 100% !important; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
   }
 </style>
 

app/src/content/embeds/palettes.html

@@ -28,11 +28,11 @@
     .palettes input[type="range"]:focus { outline: none; }
     /* WebKit */
     .palettes input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--border-color); border-radius: 999px; }
-    .palettes input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
+    .palettes input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
     /* Firefox */
     .palettes input[type="range"]::-moz-range-track { height: 6px; background: var(--border-color); border: none; border-radius: 999px; }
     .palettes input[type="range"]::-moz-range-progress { height: 6px; background: var(--primary-color); border-radius: 999px; }
-    .palettes input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
+    .palettes input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
     /* Page-wide color vision simulation classes */
     html.cb-grayscale, body.cb-grayscale { filter: grayscale(1) !important; }
     html.cb-protanopia, body.cb-protanopia { filter: url(#cb-protanopia) !important; }