v0.2.18

src/web/css/30-mail.css

@@ -593,7 +593,8 @@
 .message-body iframe {
   display: block;
   width: 100%;
-  min-height: 68vh;
+  height: var(--reader-message-frame-height, 260px);
+  min-height: 260px;
   border: 0;
   background: var(--reader-bg);
 }

src/web/js/40-messages-reader.js

@@ -503,6 +503,7 @@ function setReaderFullscreen(enabled, options = {}) {
     }
     restoreReaderScroll();
   }
+  scheduleReaderMessageFrameResize();
 }
 
 function enterReaderFullscreen() {
@@ -1164,10 +1165,62 @@ function adaptMessagePreviewColors(html, detail, body) {
   return { html: doc.body.innerHTML, targetTheme, surface: adaptiveEmailRgbCss(messageSurface), text: adaptiveEmailRgbCss(messageText) };
 }
 
+let readerMessageFrameObserver = null;
+let readerMessageFrameResizeRaf = 0;
+let readerMessageFrameWindowResizeBound = false;
+
+function resizeReaderMessageFrame() {
+  readerMessageFrameResizeRaf = 0;
+  const reader = $("#reader-content");
+  const body = $("#message-body");
+  const iframe = body?.querySelector(":scope > iframe");
+  if (!reader || !body || !iframe || reader.classList.contains("hidden")) return;
+
+  let occupiedHeight = 0;
+  for (const child of reader.children) {
+    if (child === body) break;
+    const style = getComputedStyle(child);
+    if (style.display === "none" || style.position === "absolute" || style.position === "fixed") continue;
+    const rect = child.getBoundingClientRect();
+    occupiedHeight += rect.height;
+    occupiedHeight += Number.parseFloat(style.marginTop) || 0;
+    occupiedHeight += Number.parseFloat(style.marginBottom) || 0;
+  }
+
+  const availableHeight = Math.max(260, Math.floor(reader.clientHeight - occupiedHeight));
+  body.style.setProperty("--reader-message-frame-height", `${availableHeight}px`);
+}
+
+function scheduleReaderMessageFrameResize() {
+  if (readerMessageFrameResizeRaf) cancelAnimationFrame(readerMessageFrameResizeRaf);
+  readerMessageFrameResizeRaf = requestAnimationFrame(resizeReaderMessageFrame);
+}
+
+function observeReaderMessageFrameLayout() {
+  const reader = $("#reader-content");
+  const body = $("#message-body");
+  if (!reader || !body) return;
+
+  if (typeof ResizeObserver === "function") {
+    if (!readerMessageFrameObserver) readerMessageFrameObserver = new ResizeObserver(scheduleReaderMessageFrameResize);
+    readerMessageFrameObserver.disconnect();
+    readerMessageFrameObserver.observe(reader);
+    for (const child of reader.children) {
+      if (child !== body) readerMessageFrameObserver.observe(child);
+    }
+  }
+
+  if (!readerMessageFrameWindowResizeBound) {
+    window.addEventListener("resize", scheduleReaderMessageFrameResize, { passive: true });
+    readerMessageFrameWindowResizeBound = true;
+  }
+}
+
 function renderMessageBody(detail, forceRemote = false) {
   const body = $("#message-body");
   const remoteBar = $("#remote-image-bar");
   body.replaceChildren();
+  body.style.removeProperty("--reader-message-frame-height");
   remoteBar.classList.add("hidden");
   const preferredBody = state.mailPrefs.preferred_body || "auto";
   if (preferredBody === "text" || !detail?.html) {
@@ -1208,6 +1261,8 @@ function renderMessageBody(detail, forceRemote = false) {
   ].filter(Boolean).join(" ");
   iframe.srcdoc = `<!doctype html><html><head><meta charset="utf-8">${csp}<meta name="color-scheme" content="${previewTheme.targetTheme}"><style>${previewStyle}</style></head><body${bodyAttributes ? ` ${bodyAttributes}` : ""}>${safeHtml}</body></html>`;
   body.append(iframe);
+  observeReaderMessageFrameLayout();
+  resizeReaderMessageFrame();
 }
 
 async function downloadAttachment(folder, uid, attachment) {