From cc86d596a4aa9d68ee4187396cc2481653b10631 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 20 Mar 2025 17:59:17 +0200
Subject: [PATCH] match image ratios to app

---
 bskyogcard/src/components/Image.tsx     |  2 +-
 bskyogcard/src/components/PostEmbed.tsx | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/bskyogcard/src/components/Image.tsx b/bskyogcard/src/components/Image.tsx
index aefdffae2d..e318c1b02b 100644
--- a/bskyogcard/src/components/Image.tsx
+++ b/bskyogcard/src/components/Image.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import {Image as ImageSource} from '../data/getPostData.js'
-import {atoms as a, style as s, StyleProp,theme as t} from '../theme/index.js'
+import {atoms as a, style as s, StyleProp, theme as t} from '../theme/index.js'
 import {Box} from './Box.js'
 import {MediaInsetBorder} from './MediaInsetBorder.js'
 
diff --git a/bskyogcard/src/components/PostEmbed.tsx b/bskyogcard/src/components/PostEmbed.tsx
index db0a058a07..b7674466ec 100644
--- a/bskyogcard/src/components/PostEmbed.tsx
+++ b/bskyogcard/src/components/PostEmbed.tsx
@@ -407,7 +407,7 @@ export function ImagesEmbed({
     } else if (imgs.length === 3) {
       return (
         <Grid.Row gutter={gutter}>
-          <Grid.Column gutter={gutter} width={2 / 3}>
+          <Grid.Column gutter={gutter} width={1 / 2}>
             <SquareImage
               image={imgs[0]}
               style={{
@@ -420,10 +420,12 @@ export function ImagesEmbed({
               }}
             />
           </Grid.Column>
-          <Grid.Column gutter={gutter} width={1 / 3} cx={[a.gap_xs]}>
+          <Grid.Column gutter={gutter} width={1 / 2} cx={[a.gap_xs]}>
             <SquareImage
               image={imgs[1]}
               style={{
+                // awkward number found through trial and error to account for gap
+                paddingTop: '48.75%',
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderBottomRightRadius: 0,
@@ -437,6 +439,7 @@ export function ImagesEmbed({
             <SquareImage
               image={imgs[2]}
               style={{
+                paddingTop: '48.75%',
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderTopRightRadius: 0,
@@ -457,6 +460,8 @@ export function ImagesEmbed({
             <SquareImage
               image={imgs[0]}
               style={{
+                // aspect ratio of 1.5 - matches app
+                paddingTop: '66.666%',
                 borderTopRightRadius: 0,
                 borderBottomRightRadius: 0,
                 borderBottomLeftRadius: 0,
@@ -470,6 +475,7 @@ export function ImagesEmbed({
             <SquareImage
               image={imgs[2]}
               style={{
+                paddingTop: '66.666%',
                 borderTopLeftRadius: 0,
                 borderBottomRightRadius: 0,
                 borderTopRightRadius: 0,
@@ -485,6 +491,7 @@ export function ImagesEmbed({
             <SquareImage
               image={imgs[1]}
               style={{
+                paddingTop: '66.666%',
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderBottomRightRadius: 0,
@@ -498,6 +505,7 @@ export function ImagesEmbed({
             <SquareImage
               image={imgs[3]}
               style={{
+                paddingTop: '66.666%',
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderTopRightRadius: 0,