From f20a8ab6fe295983a0704c657a7828a8e1fb3d0c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 29 Dec 2022 22:23:27 +0000
Subject: [PATCH] Revert "Merge branch 'square' into 'develop'"

This reverts merge request !2027
---
 CHANGELOG.md                                                    | 1 -
 app/soapbox/components/media-gallery.tsx                        | 2 +-
 .../placeholder/components/placeholder-media-gallery.tsx        | 2 +-
 app/soapbox/features/status/components/card.tsx                 | 2 +-
 app/soapbox/utils/media-aspect-ratio.ts                         | 2 +-
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b5c869413..3528d406a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,7 +51,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: move instance favicon beside username instead of post timestamp.
 - Posts: changed the behavior of content warnings. CWs and sensitive media are unified into one design.
 - Posts: redesigned interaction counters to use text instead of icons.
-- Posts: letterbox images taller than 1:1.
 - Profile: overhauled user profiles to be consistent with the rest of the UI.
 - Composer: move emoji button alongside other composer buttons, add numerical counter.
 - Birthdays: move today's birthdays out of notifications into right sidebar.
diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 722f5540a0..cd7cd26054 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -294,7 +294,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     const aspectRatio = media.getIn([0, 'meta', 'original', 'aspect']) as number | undefined;
 
     const getHeight = () => {
-      if (!aspectRatio) return w;
+      if (!aspectRatio) return w * 9 / 16;
       if (isPanoramic(aspectRatio)) return Math.floor(w / maximumAspectRatio);
       if (isPortrait(aspectRatio)) return Math.floor(w / minimumAspectRatio);
       return Math.floor(w / aspectRatio);
diff --git a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
index b309404783..3eab10e4d0 100644
--- a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
@@ -29,7 +29,7 @@ const PlaceholderMediaGallery: React.FC<IPlaceholderMediaGallery> = ({ media, de
     let itemsDimensions: Record<string, string>[] = [];
 
     if (size === 1) {
-      style.height = width;
+      style.height = width! * 9 / 16;
 
       itemsDimensions = [
         { w: '100%', h: '100%' },
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index c19191f85c..18dd427a51 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -111,7 +111,7 @@ const Card: React.FC<ICard> = ({
 
     // Constrain to a sane limit
     // https://en.wikipedia.org/wiki/Aspect_ratio_(image)
-    return Math.min(Math.max(1, ratio), 4);
+    return Math.min(Math.max(9 / 16, ratio), 4);
   };
 
   const interactive = card.type !== 'link';
diff --git a/app/soapbox/utils/media-aspect-ratio.ts b/app/soapbox/utils/media-aspect-ratio.ts
index 781a22fd5a..8821d9debe 100644
--- a/app/soapbox/utils/media-aspect-ratio.ts
+++ b/app/soapbox/utils/media-aspect-ratio.ts
@@ -1,4 +1,4 @@
-export const minimumAspectRatio = 1; // Square
+export const minimumAspectRatio = 9 / 16; // Portrait phone
 export const maximumAspectRatio = 10; // Generous min-height
 
 export const isPanoramic = (ar: number) => {