From c5a22ffd97e5565e07b48f89f980d52624ca3b65 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 15 Apr 2025 17:33:36 +0300
Subject: [Embed] Fix 3-image grid on Safari (#8198)

* fix 3-image grid for safari

* match 4-grid aspect ratio to app
---
 bskyembed/src/components/embed.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'bskyembed')

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>
-- 
cgit 1.4.1