min image size in group

frontend/src/lib/markdown.ts

@@ -119,7 +119,16 @@ function groupFigures(html: string): string {
         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">`);
+        const r = safe.toFixed(3);
+        // flex-basis tracks target row height (var --row-h) × aspect ratio,
+        // so the browser fits as many figures per row as it can while keeping
+        // each at roughly the target height; the rest wrap. max-width caps
+        // any leftover row so a lone last image doesn't balloon.
+        const style = [
+          `flex:${r} ${r} calc(${r} * var(--row-h, 16rem))`,
+          `max-width:calc(${r} * var(--row-max, 30rem))`,
+        ].join(';');
+        return fig.replace('<figure>', `<figure style="${style}">`);
       });
       return `<div class="figure-row">${items.join('')}</div>`;
     },