From b1b1ed0f3f7b7e40fbc053d55f5d1d40124a3c0e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 1 Aug 2023 14:26:22 +0800
Subject: [PATCH] Adjustments to prevent layout shift

---
 src/components/media.jsx  | 5 +++--
 src/components/status.css | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index ffd3f3ca..9c688572 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -121,6 +121,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
     '--height': `${height}px`,
     aspectRatio: `${width} / ${height}`,
   };
+  const fixedWidth = width > height * 2;
 
   if (isImage) {
     // Note: type: unknown might not have width/height
@@ -142,7 +143,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
     return (
       <Parent
         ref={parentRef}
-        class={`media media-image`}
+        class={`media media-image ${fixedWidth ? 'media-fixed-width' : ''}`}
         onClick={onClick}
         data-orientation={orientation}
         style={
@@ -244,7 +245,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
       <Parent
         class={`media media-${isGIF ? 'gif' : 'video'} ${
           autoGIFAnimate ? 'media-contain' : ''
-        }`}
+        } ${fixedWidth ? 'media-fixed-width' : ''}`}
         data-orientation={orientation}
         data-formatted-duration={formattedDuration}
         data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
diff --git a/src/components/status.css b/src/components/status.css
index ab0f504c..1bbc8875 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -600,6 +600,12 @@
   width: auto;
   min-height: 44px;
   /* width: min(var(--width), 100%); */
+  /* max-height: min(var(--height), 33vh); */
+  height: min(160px, var(--height), 33vh);
+}
+.status .media-container.media-eq1 .media.media-fixed-width {
+  width: min(var(--width), 100%);
+  height: auto;
   max-height: min(var(--height), 33vh);
 }
 .status .media-container.media-eq1 .media[data-orientation='portrait'] {
@@ -694,6 +700,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  vertical-align: middle;
 }
 .status .media {
   cursor: pointer;