fix(web): add dimension reservation to ImageEmbed component

This commit is contained in:
Jannis Braun
2026-03-25 01:55:12 +01:00
parent 123e40bb9a
commit b96c16b622
@@ -10,12 +10,16 @@ export function ImageEmbed({ embed }: ImageEmbedProps) {
const openImagePreview = useUIStore((s) => s.openImagePreview); const openImagePreview = useUIStore((s) => s.openImagePreview);
const imageUrl = embed.image ?? embed.url; 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 ( return (
<div className="mt-2"> <div className="mt-2 rounded-lg overflow-hidden bg-surface-input" style={style}>
<img <img
src={imageUrl} src={imageUrl}
alt={embed.title ?? ''} 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" loading="lazy"
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
onClick={() => openImagePreview(imageUrl)} onClick={() => openImagePreview(imageUrl)}