From 84ec8e04b749cede331dd08e1dde3276e4dfebeb Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sat, 25 Apr 2026 12:53:11 +0200
Subject: [PATCH] fix(web): restore known-dimension reservation in ImageEmbed
 without letterbox fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restores the dimension reservation reverted in dae6f2d, scoped to
the embed.width && embed.height case only. No fallback aspect-ratio
when dims are null — that was the source of the dark letterbox bars
on Tenor/Klipy GIFs and OG-less images that triggered the revert.

The server-side probe in embedResolver.ts:196 already populates dims
for all image-type embeds; this change makes the client honor them.
---
 .../src/components/chat/embeds/ImageEmbed.tsx | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/chat/embeds/ImageEmbed.tsx b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
index 9115b22b..b3dd259f 100644
--- a/packages/web/src/components/chat/embeds/ImageEmbed.tsx
+++ b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
@@ -9,17 +9,23 @@ interface ImageEmbedProps {
 export function ImageEmbed({ embed }: ImageEmbedProps) {
   const openImagePreview = useUIStore((s) => s.openImagePreview);
   const imageUrl = embed.image ?? embed.url;
+  const { width, height } = embed;
 
   return (
-    <div className="mt-2 max-w-[400px]">
-      <img
-        src={imageUrl}
-        alt={embed.title ?? ''}
-        className="max-w-full max-h-[300px] rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
-        loading="lazy"
-        referrerPolicy="no-referrer"
-        onClick={() => openImagePreview(imageUrl)}
-      />
+    <div className="mt-2 max-w-fit">
+      <div
+        className="relative rounded-lg overflow-hidden"
+        style={width && height ? { aspectRatio: `${width}/${height}`, maxWidth: Math.min(width, 400), maxHeight: 300 } : undefined}
+      >
+        <img
+          src={imageUrl}
+          alt={embed.title ?? ''}
+          className="w-full h-full max-w-[400px] max-h-[300px] object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          onClick={() => openImagePreview(imageUrl)}
+        />
+      </div>
     </div>
   );
 }