devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

fix: cap all embed types to 400px max-width

Browse Source
This commit is contained in:
Jannis Braun
2026-03-24 05:16:31 +01:00
parent e64658bdd5
commit 7e9020f5a6
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/EmbedRenderer.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export function EmbedRenderer({ embed }: EmbedRendererProps) {
case 'audio': case 'audio':
return ( 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 && ( {embed.title && (
<a <a
href={embed.url} href={embed.url}
packages/web/src/components/chat/embeds/GenericEmbed.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export function GenericEmbed({ embed }: GenericEmbedProps) {
const providerName = embed.provider ?? hostnameFromUrl(embed.url); const providerName = embed.provider ?? hostnameFromUrl(embed.url);
return ( 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"> <div className="flex-1 p-3 min-w-0">
{providerName && ( {providerName && (
<div className="text-[12px] text-txt-muted font-medium mb-1 truncate"> <div className="text-[12px] text-txt-muted font-medium mb-1 truncate">
packages/web/src/components/chat/embeds/ImageEmbed.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export function ImageEmbed({ embed }: ImageEmbedProps) {
<img <img
src={imageUrl} src={imageUrl}
alt={embed.title ?? ''} 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" loading="lazy"
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
onClick={() => openImagePreview(imageUrl)} onClick={() => openImagePreview(imageUrl)}
packages/web/src/components/chat/embeds/RichEmbed.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function RichEmbed({ embed }: RichEmbedProps) {
if (!embed.embedUrl) return null; if (!embed.embedUrl) return null;
return ( 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 ? ( {isLoaded ? (
<iframe <iframe
src={embed.embedUrl} src={embed.embedUrl}
packages/web/src/components/chat/embeds/VideoEmbed.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ export function VideoEmbed({ embed }: VideoEmbedProps) {
// Direct video URL — no provider, no embedUrl // Direct video URL — no provider, no embedUrl
if (!embed.provider && !embed.embedUrl) { if (!embed.provider && !embed.embedUrl) {
return ( return (
<div className="mt-2 max-w-[520px]"> <div className="mt-2 max-w-[400px]">
<video <video
src={embed.url} src={embed.url}
controls controls
@@ -28,7 +28,7 @@ export function VideoEmbed({ embed }: VideoEmbedProps) {
: null; : null;
return ( 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 */} {/* 16:9 video area */}
<div className="relative w-full" style={{ paddingBottom: '56.25%' }}> <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
{isPlaying && embed.embedUrl ? ( {isPlaying && embed.embedUrl ? (