From dae6f2d5187aee1053569e7a67878fa904ab1743 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Wed, 25 Mar 2026 03:37:18 +0100
Subject: [PATCH] fix: remove forced 4/3 aspect ratio and dark background from
 image containers

Images now size naturally within max constraints instead of being
letterboxed into a 4/3 bg-surface-input container. Fixes dark bars
on GIFs and images whose aspect ratio doesn't match 4/3.
---
 packages/web/src/components/chat/MarkdownRenderer.tsx  | 7 ++-----
 packages/web/src/components/chat/Message.tsx           | 7 ++-----
 packages/web/src/components/chat/embeds/ImageEmbed.tsx | 8 ++------
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/components/chat/MarkdownRenderer.tsx b/packages/web/src/components/chat/MarkdownRenderer.tsx
index 8ed1691d..9218172a 100644
--- a/packages/web/src/components/chat/MarkdownRenderer.tsx
+++ b/packages/web/src/components/chat/MarkdownRenderer.tsx
@@ -187,14 +187,11 @@ function buildComponents(): Components {
 
     // Images (in markdown content — not attachments)
     img: ({ src, alt }) => (
-      <div
-        className="mt-1 rounded-md overflow-hidden bg-surface-input"
-        style={{ aspectRatio: '4/3', maxWidth: 400, maxHeight: 300 }}
-      >
+      <div className="mt-1 max-w-[400px]">
         <img
           src={src}
           alt={alt ?? ''}
-          className="w-full h-full object-contain"
+          className="max-w-full max-h-[300px] rounded-md"
           loading="lazy"
           referrerPolicy="no-referrer"
           crossOrigin="anonymous"
diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index a9d1264f..5ac5cdb2 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -346,14 +346,11 @@ export function Message({ message, isCompact, isFirstInGroup, previousMessageId
         ) : (
           <div className="flex flex-col gap-1">
             {isGifOnly ? (
-              <div
-                className="mt-1 max-w-[250px] rounded-lg overflow-hidden bg-surface-input"
-                style={{ aspectRatio: '4/3', maxHeight: 250 }}
-              >
+              <div className="mt-1 max-w-[250px]">
                 <img
                   src={message.content!.trim()}
                   alt="GIF"
-                  className="w-full h-full object-contain rounded-lg"
+                  className="max-w-full max-h-[250px] rounded-lg"
                   loading="lazy"
                 />
               </div>
diff --git a/packages/web/src/components/chat/embeds/ImageEmbed.tsx b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
index 54f31186..9115b22b 100644
--- a/packages/web/src/components/chat/embeds/ImageEmbed.tsx
+++ b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
@@ -10,16 +10,12 @@ 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 rounded-lg overflow-hidden bg-surface-input" style={style}>
+    <div className="mt-2 max-w-[400px]">
       <img
         src={imageUrl}
         alt={embed.title ?? ''}
-        className="w-full h-full object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
+        className="max-w-full max-h-[300px] rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
         loading="lazy"
         referrerPolicy="no-referrer"
         onClick={() => openImagePreview(imageUrl)}