From c91cda1a2c975a47497b507e9d39c3a36d9d45ad Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 1 Aug 2023 23:54:28 +0800
Subject: [PATCH] Ok the math was too advanced for CSS

---
 src/components/media.jsx  | 3 +++
 src/components/status.css | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index ffd3f3ca..9f0361cd 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -116,9 +116,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
     if (smaller) setImageSmallerThanParent(smaller);
   }, [width, height]);
 
+  const maxAspectHeight = window.innerHeight * 0.33;
   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`,
     aspectRatio: `${width} / ${height}`,
   };
 
diff --git a/src/components/status.css b/src/components/status.css
index bbbe8949..7bf96dd2 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -599,7 +599,8 @@
   min-width: 44px;
   /* width: auto; */
   min-height: 44px;
-  --aspectWidth: calc(--width / --height * max(160px, 33vh));
+  /* --maxAspectHeight: max(160px, 33vh);
+  --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
   width: min(var(--aspectWidth), var(--width), 100%);
   max-height: min(var(--height), 33vh);
 }