slideshow

public/css/style.css

@@ -660,12 +660,35 @@ body.detail-image-fs-open { overflow: hidden; }
 }
 .prose img {
     max-width: 100%;
+    height: auto;
     border-radius: 4px;
     border: 1px solid var(--t-border);
     margin: 0.8em 0;
     cursor: nwse-resize;
 }
 .prose img.resizing { outline: 2px solid var(--t-accent); }
+
+/* Preview panes: ensure the prose content never overflows horizontally so
+   images can resolve their `max-width: 100%` against a constrained container.
+   Without this, images with explicit width attrs (e.g. <img width="2000">)
+   push the content box wider than the flex pane. */
+#editor-preview,
+#board-preview-body {
+    overflow-x: hidden;
+    min-width: 0;
+}
+#preview-content,
+#board-preview-body > * {
+    max-width: 100%;
+    min-width: 0;
+}
+#editor-preview .prose img,
+#board-preview-body.prose img,
+#board-preview-body .prose img {
+    max-width: 100%;
+    width: auto;
+    height: auto;
+}
 .prose table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
 .prose th, .prose td { border: 1px solid var(--t-border); padding: 0.4em 0.8em; text-align: left; }
 .prose th { background: var(--t-raised); color: var(--t-bright); font-weight: 600; }