acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[Embed] Fix 3-image grid on Safari (#8198)

Browse Source 
* fix 3-image grid for safari

* match 4-grid aspect ratio to app
This commit is contained in:
Samuel Newman
2025-04-15 17:33:36 +03:00
committed by GitHub
parent f46336e341
commit c5a22ffd97
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyembed/src/components/embed.tsx
+10 -8
View File
@@ -250,18 +250,20 @@ function ImageEmbed({
case 3: case 3:
return ( return (
<div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]"> <div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]">
<img <div className="flex-1 aspect-square">
src={content.images[0].thumb} <img
alt={content.images[0].alt} src={content.images[0].thumb}
className="flex-1 aspect-square object-cover rounded-sm" alt={content.images[0].alt}
/> className="w-full h-full object-cover rounded-sm"
<div className="flex flex-col gap-1 flex-1 aspect-square"> />
</div>
<div className="flex flex-col gap-1 flex-1">
{content.images.slice(1).map((image, i) => ( {content.images.slice(1).map((image, i) => (
<img <img
key={i} key={i}
src={image.thumb} src={image.thumb}
alt={image.alt} alt={image.alt}
className="w-full h-full object-cover rounded-sm" className="flex-1 object-cover rounded-sm min-h-0"
/> />
))} ))}
</div> </div>
@@ -275,7 +277,7 @@ function ImageEmbed({
key={i} key={i}
src={image.thumb} src={image.thumb}
alt={image.alt} alt={image.alt}
className="aspect-video w-full object-cover rounded-sm" className="aspect-[3/2] w-full object-cover rounded-sm"
/> />
))} ))}
</div> </div>