fix(web): add aspect-ratio fallback for markdown inline images

2026-03-25 01:56:33 +01:00
parent 995c71367e
commit 30c3b9b352
1 changed files with 13 additions and 8 deletions
@@ -187,14 +187,19 @@ function buildComponents(): Components {

    // Images (in markdown content — not attachments)
    img: ({ src, alt }) => (
-      <img
-        src={src}
-        alt={alt ?? ''}
-        className="max-w-[400px] max-h-[300px] rounded-md mt-1"
-        loading="lazy"
-        referrerPolicy="no-referrer"
-        crossOrigin="anonymous"
-      />
+      <div
+        className="mt-1 rounded-md overflow-hidden bg-surface-input"
+        style={{ aspectRatio: '4/3', maxWidth: 400, maxHeight: 300 }}
+      >
+        <img
+          src={src}
+          alt={alt ?? ''}
+          className="w-full h-full object-contain"
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          crossOrigin="anonymous"
+        />
+      </div>
    ),

    // Tables (GFM)