diff options
| author | Samuel Newman <mozzius@protonmail.com> | 2025-04-15 17:33:36 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-04-15 07:33:36 -0700 |
| commit | c5a22ffd97e5565e07b48f89f980d52624ca3b65 (patch) | |
| tree | 797485d479a34d5bc71c44ead21ba02bfc7dfa73 /bskyembed | |
| parent | f46336e34142e7f46bb1395f727e303e37b15d41 (diff) | |
| download | voidsky-c5a22ffd97e5565e07b48f89f980d52624ca3b65.tar.zst | |
[Embed] Fix 3-image grid on Safari (#8198)
* fix 3-image grid for safari * match 4-grid aspect ratio to app
Diffstat (limited to 'bskyembed')
| -rw-r--r-- | bskyembed/src/components/embed.tsx | 18 |
1 files changed, 10 insertions, 8 deletions
diff --git a/bskyembed/src/components/embed.tsx b/bskyembed/src/components/embed.tsx index 2af294aef..428782b64 100644 --- a/bskyembed/src/components/embed.tsx +++ b/bskyembed/src/components/embed.tsx @@ -250,18 +250,20 @@ function ImageEmbed({ case 3: return ( <div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]"> - <img - src={content.images[0].thumb} - alt={content.images[0].alt} - className="flex-1 aspect-square object-cover rounded-sm" - /> - <div className="flex flex-col gap-1 flex-1 aspect-square"> + <div className="flex-1 aspect-square"> + <img + src={content.images[0].thumb} + alt={content.images[0].alt} + className="w-full h-full object-cover rounded-sm" + /> + </div> + <div className="flex flex-col gap-1 flex-1"> {content.images.slice(1).map((image, i) => ( <img key={i} src={image.thumb} alt={image.alt} - className="w-full h-full object-cover rounded-sm" + className="flex-1 object-cover rounded-sm min-h-0" /> ))} </div> @@ -275,7 +277,7 @@ function ImageEmbed({ key={i} src={image.thumb} alt={image.alt} - className="aspect-video w-full object-cover rounded-sm" + className="aspect-[3/2] w-full object-cover rounded-sm" /> ))} </div> |