From 1887a34fc5def3e5461ce97a3242694400e6f31d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 2 Aug 2023 17:41:00 +0800
Subject: [PATCH] Another aspect ratio style fix

---
 src/components/media.jsx  |  8 ++++++--
 src/components/status.css | 13 +++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index 9f0361cd..da67646b 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -116,12 +116,16 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
     if (smaller) setImageSmallerThanParent(smaller);
   }, [width, height]);
 
-  const maxAspectHeight = window.innerHeight * 0.33;
+  const maxAspectHeight =
+    window.innerHeight * (orientation === 'portrait' ? 0.45 : 0.33);
+  const maxHeight = orientation === 'portrait' ? 0 : 160;
   const mediaStyles = {
     '--width': `${width}px`,
     '--height': `${height}px`,
     // Calculate '--aspectWidth' based on aspect ratio calculated from '--width' and '--height', max height has to be 160px
-    '--aspectWidth': `${(width / height) * Math.max(160, maxAspectHeight)}px`,
+    '--aspectWidth': `${
+      (width / height) * Math.max(maxHeight, maxAspectHeight)
+    }px`,
     aspectRatio: `${width} / ${height}`,
   };
 
diff --git a/src/components/status.css b/src/components/status.css
index 2a31a424..971d415f 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -618,16 +618,21 @@
   max-height: min(var(--height), 33vh);
 }
 .status .media-container.media-eq1 .media[data-orientation='portrait'] {
-  width: auto;
+  /* width: auto;
   height: min(var(--height), 45vh);
-  max-height: none;
+  max-height: none; */
+  max-height: min(var(--height), 45vh);
 }
 .status.large .media-container.media-eq1 {
   max-height: min(var(--height), 60vh);
 }
-.status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
-  height: min(var(--height), 60vh);
+.status.large .media-container.media-eq1 .media {
+  width: min(var(--width), 100%);
+  max-height: min(var(--height), 80vh);
 }
+/* .status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
+  height: min(var(--height), 60vh);
+} */
 .status-carousel .status .media-container.media-eq1 .media {
   width: min(var(--width), 100%);
   height: auto;