quilling.dev
An ATproto social media client -- with an independent Appview.
[Embed] Fix 3-image grid on Safari (#8198)
* fix 3-image grid for safari
* match 4-grid aspect ratio to app
samuel.fm
+10
-8
+10
-8
bskyembed/src/components/embed.tsx
+10
-8
bskyembed/src/components/embed.tsx
···
250
250
case 3:
251
251
return (
252
252
<div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]">
253
-
<img
254
-
src={content.images[0].thumb}
255
-
alt={content.images[0].alt}
256
-
className="flex-1 aspect-square object-cover rounded-sm"
257
-
/>
258
-
<div className="flex flex-col gap-1 flex-1 aspect-square">
253
+
<div className="flex-1 aspect-square">
254
+
<img
255
+
src={content.images[0].thumb}
256
+
alt={content.images[0].alt}
257
+
className="w-full h-full object-cover rounded-sm"
258
+
/>
259
+
</div>
260
+
<div className="flex flex-col gap-1 flex-1">
259
261
{content.images.slice(1).map((image, i) => (
260
262
<img
261
263
key={i}
262
264
src={image.thumb}
263
265
alt={image.alt}
264
-
className="w-full h-full object-cover rounded-sm"
266
+
className="flex-1 object-cover rounded-sm min-h-0"
265
267
/>
266
268
))}
267
269
</div>
···
275
277
key={i}
276
278
src={image.thumb}
277
279
alt={image.alt}
278
-
className="aspect-video w-full object-cover rounded-sm"
280
+
className="aspect-[3/2] w-full object-cover rounded-sm"
279
281
/>
280
282
))}
281
283
</div>