From b96c16b62272f50783adf763c7d63e63bdde074a Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Wed, 25 Mar 2026 01:55:12 +0100
Subject: [PATCH] fix(web): add dimension reservation to ImageEmbed component

---
 packages/web/src/components/chat/embeds/ImageEmbed.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/chat/embeds/ImageEmbed.tsx b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
index f4cc0c57..54f31186 100644
--- a/packages/web/src/components/chat/embeds/ImageEmbed.tsx
+++ b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
@@ -10,12 +10,16 @@ export function ImageEmbed({ embed }: ImageEmbedProps) {
   const openImagePreview = useUIStore((s) => s.openImagePreview);
   const imageUrl = embed.image ?? embed.url;
 
+  const style: React.CSSProperties = embed.width && embed.height
+    ? { aspectRatio: `${embed.width}/${embed.height}`, maxWidth: Math.min(embed.width, 400), maxHeight: 300 }
+    : { aspectRatio: '4/3', maxWidth: 400, maxHeight: 300 };
+
   return (
-    <div className="mt-2">
+    <div className="mt-2 rounded-lg overflow-hidden bg-surface-input" style={style}>
       <img
         src={imageUrl}
         alt={embed.title ?? ''}
-        className="max-w-[400px] max-h-[300px] object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
+        className="w-full h-full object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
         loading="lazy"
         referrerPolicy="no-referrer"
         onClick={() => openImagePreview(imageUrl)}