From d48f9ca66a1b03d4ada06640cdf166f1c67fba08 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 31 Oct 2023 15:06:08 +0100
Subject: [PATCH] Story Viewer: Fix UI on mobiles (#3932)

---
 src/components/story/StoryViewer.module.scss         |  8 ++++++--
 src/components/story/mediaArea/MediaArea.module.scss |  6 ++++--
 src/components/story/mediaArea/MediaAreaOverlay.tsx  | 12 ++++--------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/story/StoryViewer.module.scss b/src/components/story/StoryViewer.module.scss
index be1c7e161..6b2b0c931 100644
--- a/src/components/story/StoryViewer.module.scss
+++ b/src/components/story/StoryViewer.module.scss
@@ -238,9 +238,13 @@
   overflow: hidden;
 
   @media (max-width: 600px) {
-    width: calc(100% - 1rem) !important; // Update `MOBILE_MEDIA_OFFSET_X` in MediaAreaOverlay on change
-    height: calc(100% - 4.5rem) !important; // Update `MOBILE_MEDIA_OFFSET_Y` in MediaAreaOverlay on change
+    width: calc(100% - 1rem) !important;
+    height: auto !important;
     margin: 0.5rem;
+    bottom: 3.5rem;
+    @supports (bottom: calc(3.5rem + env(safe-area-inset-bottom))) {
+      bottom: calc(3.5rem + env(safe-area-inset-bottom));
+    }
   }
 
   :global(body.ghost-animating) & {
diff --git a/src/components/story/mediaArea/MediaArea.module.scss b/src/components/story/mediaArea/MediaArea.module.scss
index 7e57b1e00..08dc1b200 100644
--- a/src/components/story/mediaArea/MediaArea.module.scss
+++ b/src/components/story/mediaArea/MediaArea.module.scss
@@ -4,8 +4,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  width: var(--media-width, auto);
-  height: var(--media-height, auto);
+  width: auto;
+  height: auto;
   aspect-ratio: 9 / 16;
   pointer-events: none;
 
@@ -13,6 +13,8 @@
     right: auto;
     left: 50%;
     top: 50%;
+    width: var(--media-width, 100%);
+    height: var(--media-height, 100%);
     transform: translate(-50%, -50%);
   }
 }
diff --git a/src/components/story/mediaArea/MediaAreaOverlay.tsx b/src/components/story/mediaArea/MediaAreaOverlay.tsx
index 0bf40348b..510fe9bcf 100644
--- a/src/components/story/mediaArea/MediaAreaOverlay.tsx
+++ b/src/components/story/mediaArea/MediaAreaOverlay.tsx
@@ -7,7 +7,6 @@ import { MOBILE_SCREEN_MAX_WIDTH } from '../../../config';
 import { requestMutation } from '../../../lib/fasterdom/fasterdom';
 import buildClassName from '../../../util/buildClassName';
 import buildStyle from '../../../util/buildStyle';
-import { REM } from '../../common/helpers/mediaDimensions';
 
 import useWindowSize from '../../../hooks/useWindowSize';
 
@@ -22,8 +21,6 @@ type OwnProps = {
 };
 
 const STORY_ASPECT_RATIO = 9 / 16;
-const MOBILE_MEDIA_OFFSET_X = Number(REM);
-const MOBILE_MEDIA_OFFSET_Y = 4.5 * REM;
 
 const MediaAreaOverlay = ({
   story, isActive, className,
@@ -47,13 +44,12 @@ const MediaAreaOverlay = ({
       return;
     }
 
-    const adaptedHeight = windowSize.height - MOBILE_MEDIA_OFFSET_Y;
-    const adoptedWidth = windowSize.width - MOBILE_MEDIA_OFFSET_X;
-
     const screenAspectRatio = windowSize.width / windowSize.height;
 
-    const width = screenAspectRatio < STORY_ASPECT_RATIO ? adaptedHeight * STORY_ASPECT_RATIO : adoptedWidth;
-    const height = screenAspectRatio < STORY_ASPECT_RATIO ? adaptedHeight : adoptedWidth / STORY_ASPECT_RATIO;
+    const width = screenAspectRatio < STORY_ASPECT_RATIO
+      ? element.clientHeight * STORY_ASPECT_RATIO : element.clientWidth;
+    const height = screenAspectRatio < STORY_ASPECT_RATIO
+      ? element.clientHeight : element.clientWidth / STORY_ASPECT_RATIO;
 
     requestMutation(() => {
       element.style.setProperty('--media-width', `${width}px`);