From 47d99b8712f0bbcb505e9533e5b439b1360fc298 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 16:35:59 -0500
Subject: Adjust image sizing (#5302)

---
 src/view/com/util/images/AutoSizedImage.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/view/com/util/images/AutoSizedImage.tsx')

diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index f57ab4e3c..80c48b133 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -23,9 +23,10 @@ export function useImageAspectRatio({
   const [raw, setAspectRatio] = React.useState<number>(
     dimensions ? calc(dimensions) : 1,
   )
+  // this basically controls the width of the image
   const {isCropped, constrained, max} = React.useMemo(() => {
-    const a34 = 0.75 // max of 3:4 ratio in feeds
-    const constrained = Math.max(raw, a34)
+    const ratio = 1 / 2 // max of 1:2 ratio in feeds
+    const constrained = Math.max(raw, ratio)
     const max = Math.max(raw, 0.25) // max of 1:4 in thread
     const isCropped = raw < constrained
     return {
@@ -68,14 +69,14 @@ export function ConstrainedImage({
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   /**
-   * Computed as a % value to apply as `paddingTop`
+   * Computed as a % value to apply as `paddingTop`, this basically controls
+   * the height of the image.
    */
   const outerAspectRatio = React.useMemo<DimensionValue>(() => {
-    // capped to square or shorter
     const ratio =
       isNative || !gtMobile
-        ? Math.min(1 / aspectRatio, 1.5)
-        : Math.min(1 / aspectRatio, 1)
+        ? Math.min(1 / aspectRatio, 16 / 9) // 9:16 bounding box
+        : Math.min(1 / aspectRatio, 1) // 1:1 bounding box
     return `${ratio * 100}%`
   }, [aspectRatio, gtMobile])
 
-- 
cgit 1.4.1

