image grouping

frontend/src/lib/markdown.ts

@@ -92,9 +92,45 @@ function injectDimensions(html: string, dims?: ImageDims): string {
   });
 }
 
+// Marked emits `<p><figure>…</figure></p>` because the image renderer returns
+// a block element from an inline slot. Strip the `<p>` wrapper when the
+// paragraph contains nothing but figures (and whitespace / <br>), so the
+// figure-grouping step below can see contiguous runs.
+function unwrapFiguresFromParagraphs(html: string): string {
+  return html.replace(/<p>([\s\S]*?)<\/p>/g, (match, inner: string) => {
+    const stripped = inner.replace(/<br\s*\/?>/g, '').trim();
+    if (!stripped) return match;
+    if (/^(?:\s*<figure>[\s\S]*?<\/figure>\s*)+$/.test(stripped)) {
+      return stripped;
+    }
+    return match;
+  });
+}
+
+// Wrap runs of 2+ consecutive <figure> elements in a `.figure-row` flex
+// container. Each figure gets `flex: <aspect-ratio>` so widths divide the
+// row proportionally and the final heights match.
+function groupFigures(html: string): string {
+  return html.replace(
+    /(?:<figure>[\s\S]*?<\/figure>\s*){2,}/g,
+    (run) => {
+      const figures = run.match(/<figure>[\s\S]*?<\/figure>/g) ?? [];
+      const items = figures.map((fig) => {
+        const m = fig.match(/<img[^>]*\swidth="(\d+)"[^>]*\sheight="(\d+)"/);
+        const ratio = m ? Number(m[1]) / Number(m[2]) : 1;
+        const safe = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+        return fig.replace('<figure>', `<figure style="flex:${safe.toFixed(3)} ${safe.toFixed(3)} 0">`);
+      });
+      return `<div class="figure-row">${items.join('')}</div>`;
+    },
+  );
+}
+
 export function renderMarkdown(src: string, dims?: ImageDims): string {
   let html = renderer.parse(src, { async: false }) as string;
   html = injectDimensions(html, dims);
+  html = unwrapFiguresFromParagraphs(html);
+  html = groupFigures(html);
   return DOMPurify.sanitize(html, {
     ADD_TAGS: [...KATEX_TAGS, 'figure', 'figcaption'],
     ADD_ATTR: ['aria-hidden', 'style', 'id', 'class', 'encoding', 'mathvariant', 'displaystyle', 'scriptlevel', 'loading'],

frontend/src/styles/global.css

@@ -544,6 +544,50 @@ code, pre, kbd, samp {
   letter-spacing: 0.02em;
   line-height: 1.4;
 }
+/* Multi-image rows. Consecutive markdown images auto-collapse into a flex
+ * row; each figure gets `flex: <aspect-ratio>` inline so widths divide
+ * proportionally and heights line up. Wraps to a column on narrow screens. */
+.prose .figure-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  align-items: flex-start;
+  margin: 2.5rem 0;
+  /* Let the row breathe past the column when it gets dense. */
+  width: calc(100% + min(8vw, 4rem));
+  margin-left: calc(min(8vw, 4rem) / -2);
+}
+.prose .figure-row figure {
+  margin: 0;
+  min-width: 0;     /* allow flex children to shrink below content width */
+  flex-basis: 0;
+}
+.prose .figure-row figure img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+}
+.prose .figure-row figure figcaption {
+  text-align: left;
+  margin-top: 0.55rem;
+  font-size: 0.82rem;
+}
+@media (max-width: 640px) {
+  .prose .figure-row {
+    flex-direction: column;
+    width: 100%;
+    margin-left: 0;
+    gap: 1.4rem;
+  }
+  .prose .figure-row figure {
+    flex: 1 1 100% !important;
+  }
+  .prose .figure-row figure figcaption {
+    text-align: center;
+  }
+}
+
 .prose figure figcaption::before {
   content: "— ";
   color: var(--mauve);