From 7ec61c16fdef43e281033e61e54e5c64f3273391 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sat, 21 Mar 2026 17:20:54 +0100
Subject: [PATCH] feat: use aspect-ratio and preload=none for video/image
 attachments

---
 .../components/chat/AttachmentRenderer.tsx    | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/components/chat/AttachmentRenderer.tsx b/packages/web/src/components/chat/AttachmentRenderer.tsx
index 9494b6e7..f1483246 100644
--- a/packages/web/src/components/chat/AttachmentRenderer.tsx
+++ b/packages/web/src/components/chat/AttachmentRenderer.tsx
@@ -29,12 +29,16 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
   const { mimetype, originalName, size } = attachment;
 
   if (mimetype.startsWith('image/')) {
+    const { width, height } = attachment;
     return (
-      <div className="max-w-fit mt-1 rounded-lg overflow-hidden border border-white/[0.06]">
+      <div
+        className="max-w-fit mt-1 rounded-lg overflow-hidden border border-white/[0.06]"
+        style={width && height ? { aspectRatio: `${width}/${height}`, maxWidth: Math.min(width, 550), maxHeight: 350 } : undefined}
+      >
         <img
           src={thumbUrl ?? attUrl}
           alt={originalName}
-          className="max-w-full max-h-[350px] object-contain cursor-pointer hover:brightness-95 transition-all"
+          className="w-full h-full object-contain cursor-pointer hover:brightness-95 transition-all"
           onClick={() => openImagePreview(attUrl)}
           loading="lazy"
         />
@@ -43,13 +47,18 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
   }
 
   if (mimetype.startsWith('video/')) {
+    const { width, height } = attachment;
+    const hasDimensions = width && height;
     return (
-      <div className="mt-1 max-w-[520px]">
+      <div
+        className="mt-1 max-w-[520px] rounded-lg overflow-hidden"
+        style={hasDimensions ? { aspectRatio: `${width}/${height}`, maxHeight: 400 } : undefined}
+      >
         <video
           controls
-          preload="metadata"
+          preload={hasDimensions ? 'none' : 'metadata'}
           poster={thumbUrl ?? undefined}
-          className="max-w-full max-h-[400px] rounded-lg"
+          className="w-full h-full rounded-lg"
         >
           <source src={attUrl} type={mimetype} />
           Your browser does not support video playback.