From 7e9020f5a616b4929b591d32e46999135205e145 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Tue, 24 Mar 2026 05:16:31 +0100
Subject: [PATCH] fix: cap all embed types to 400px max-width

---
 packages/web/src/components/chat/EmbedRenderer.tsx       | 2 +-
 packages/web/src/components/chat/embeds/GenericEmbed.tsx | 2 +-
 packages/web/src/components/chat/embeds/ImageEmbed.tsx   | 2 +-
 packages/web/src/components/chat/embeds/RichEmbed.tsx    | 2 +-
 packages/web/src/components/chat/embeds/VideoEmbed.tsx   | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/chat/EmbedRenderer.tsx b/packages/web/src/components/chat/EmbedRenderer.tsx
index 440941b5..9bec6b4c 100644
--- a/packages/web/src/components/chat/EmbedRenderer.tsx
+++ b/packages/web/src/components/chat/EmbedRenderer.tsx
@@ -19,7 +19,7 @@ export function EmbedRenderer({ embed }: EmbedRendererProps) {
 
     case 'audio':
       return (
-        <div className="mt-2 max-w-[520px] bg-surface-channel rounded-[4px] border-l-4 border-border-hard p-3">
+        <div className="mt-2 max-w-[400px] bg-surface-channel rounded-[4px] border-l-4 border-border-hard p-3">
           {embed.title && (
             <a
               href={embed.url}
diff --git a/packages/web/src/components/chat/embeds/GenericEmbed.tsx b/packages/web/src/components/chat/embeds/GenericEmbed.tsx
index 586ac8bd..5e48cb67 100644
--- a/packages/web/src/components/chat/embeds/GenericEmbed.tsx
+++ b/packages/web/src/components/chat/embeds/GenericEmbed.tsx
@@ -19,7 +19,7 @@ export function GenericEmbed({ embed }: GenericEmbedProps) {
   const providerName = embed.provider ?? hostnameFromUrl(embed.url);
 
   return (
-    <div className="mt-2 max-w-[520px] bg-surface-channel rounded-[4px] border-l-4 border-border-hard flex overflow-hidden">
+    <div className="mt-2 max-w-[400px] bg-surface-channel rounded-[4px] border-l-4 border-border-hard flex overflow-hidden">
       <div className="flex-1 p-3 min-w-0">
         {providerName && (
           <div className="text-[12px] text-txt-muted font-medium mb-1 truncate">
diff --git a/packages/web/src/components/chat/embeds/ImageEmbed.tsx b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
index a0ff8075..f4cc0c57 100644
--- a/packages/web/src/components/chat/embeds/ImageEmbed.tsx
+++ b/packages/web/src/components/chat/embeds/ImageEmbed.tsx
@@ -15,7 +15,7 @@ export function ImageEmbed({ embed }: ImageEmbedProps) {
       <img
         src={imageUrl}
         alt={embed.title ?? ''}
-        className="max-w-[520px] max-h-[350px] object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
+        className="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)}
diff --git a/packages/web/src/components/chat/embeds/RichEmbed.tsx b/packages/web/src/components/chat/embeds/RichEmbed.tsx
index eb0aa7f9..cb336733 100644
--- a/packages/web/src/components/chat/embeds/RichEmbed.tsx
+++ b/packages/web/src/components/chat/embeds/RichEmbed.tsx
@@ -29,7 +29,7 @@ export function RichEmbed({ embed }: RichEmbedProps) {
   if (!embed.embedUrl) return null;
 
   return (
-    <div className="mt-2 max-w-[520px] rounded-lg overflow-hidden bg-surface-channel border border-white/[0.06]">
+    <div className="mt-2 max-w-[400px] rounded-lg overflow-hidden bg-surface-channel border border-white/[0.06]">
       {isLoaded ? (
         <iframe
           src={embed.embedUrl}
diff --git a/packages/web/src/components/chat/embeds/VideoEmbed.tsx b/packages/web/src/components/chat/embeds/VideoEmbed.tsx
index 990b454a..d9195d42 100644
--- a/packages/web/src/components/chat/embeds/VideoEmbed.tsx
+++ b/packages/web/src/components/chat/embeds/VideoEmbed.tsx
@@ -11,7 +11,7 @@ export function VideoEmbed({ embed }: VideoEmbedProps) {
   // Direct video URL — no provider, no embedUrl
   if (!embed.provider && !embed.embedUrl) {
     return (
-      <div className="mt-2 max-w-[520px]">
+      <div className="mt-2 max-w-[400px]">
         <video
           src={embed.url}
           controls
@@ -28,7 +28,7 @@ export function VideoEmbed({ embed }: VideoEmbedProps) {
     : null;
 
   return (
-    <div className="mt-2 max-w-[520px] rounded-lg overflow-hidden bg-surface-channel border border-white/[0.06]">
+    <div className="mt-2 max-w-[400px] rounded-lg overflow-hidden bg-surface-channel border border-white/[0.06]">
       {/* 16:9 video area */}
       <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
         {isPlaying && embed.embedUrl ? (