From fe29d25ddb1cf3fb12b01f7292a8bc516e36c6ce Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Thu, 30 Jul 2026 11:37:58 -0400
Subject: [PATCH] Restore iframe embed with full-width, auto-height CSS

- Removed narrow max-width/margin from generated HTML page
- iframe now spans full card width (100%)
- onload JS auto-sizes iframe height to content so nothing is cut off
- Falls back to 500px if cross-origin restriction ever applies

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/admin.js |  4 ++--
 server.js       | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/admin.js b/public/admin.js
index dab6668..031d315 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -620,8 +620,8 @@ $('#import-go-btn').addEventListener('click', async () => {
       method: 'POST',
       body: { base64, originalName: file.name },
     });
-    const embed = result.htmlBody
-      ? `<details><summary>📄 ${result.originalName}</summary><div style="border:1px solid #ccc;border-radius:4px;padding:1em;margin-top:.5em;">${result.htmlBody}</div><p><a href="${result.url}" download="${result.originalName}">⬇️ Download ${result.originalName}</a></p></details>`
+    const embed = result.htmlUrl
+      ? `<details><summary>📄 ${result.originalName}</summary><iframe src="${result.htmlUrl}" style="width:100%;border:1px solid #ccc;border-radius:4px;margin-top:.5em;display:block;" onload="try{this.style.height=this.contentDocument.documentElement.scrollHeight+32+'px'}catch(e){this.style.height='500px'}"></iframe><p><a href="${result.url}" download="${result.originalName}">⬇️ Download ${result.originalName}</a></p></details>`
       : `<a href="${result.url}" target="_blank">📄 ${result.originalName}</a>`;
     if (type === 'assignment') {
       const cur = $('#ie-body-assignment').value;
diff --git a/server.js b/server.js
index 1918334..592c716 100644
--- a/server.js
+++ b/server.js
@@ -1548,16 +1548,23 @@ app.post('/api/admin/upload-attachment', requirePin, async (req, res) => {
     return res.status(500).json({ error: `Could not save file: ${err.message}` });
   }
 
-  // Convert to HTML for inline rendering
-  let htmlBody = null;
+  // Convert to HTML for the iframe viewer
+  let htmlUrl = null;
   try {
-    const { value } = await mammoth.convertToHtml({ buffer });
-    htmlBody = value || null;
+    const { value: bodyHtml } = await mammoth.convertToHtml({ buffer });
+    const htmlFilename = `${uuid}.html`;
+    const page = `<!doctype html><html><head><meta charset="utf-8">
+<style>*{box-sizing:border-box}body{font-family:sans-serif;margin:0;padding:1rem;line-height:1.6;font-size:15px}
+img{max-width:100%}table{border-collapse:collapse;width:100%}td,th{border:1px solid #ccc;padding:.4em .6em}
+h1,h2,h3{margin-top:1em}</style>
+</head><body>${bodyHtml}</body></html>`;
+    await writeFile(join(ATTACHMENTS_DIR, htmlFilename), page);
+    htmlUrl = `/api/attachments/${htmlFilename}`;
   } catch (_) {
     // preview failed — download link still works
   }
 
-  return res.json({ url: `/api/attachments/${filename}`, htmlBody, originalName });
+  return res.json({ url: `/api/attachments/${filename}`, htmlUrl, originalName });
 });
 
 app.get('/health', (req, res) => res.json({ ok: true }));