From 7a8a16cd9cc68cd1ed2e335181fff2db3da4eaed Mon Sep 17 00:00:00 2001
From: jm-morani <59413732+jm-morani@users.noreply.github.com>
Date: Fri, 26 Aug 2022 15:36:48 -0400
Subject: [PATCH] Fix viewer position and shape in mobile mode (#7677)

Co-authored-by: Jean-Michel Morani <probono+lbry@morani.org>
---
 ui/component/fileRenderFloating/view.jsx | 3 +--
 ui/scss/component/_content.scss          | 8 ++++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx
index ceec20faa..ac263270a 100644
--- a/ui/component/fileRenderFloating/view.jsx
+++ b/ui/component/fileRenderFloating/view.jsx
@@ -21,7 +21,6 @@ import AutoplayCountdown from 'component/autoplayCountdown';
 // scss/init/vars.scss
 // --header-height
 const HEADER_HEIGHT = 60;
-const HEADER_HEIGHT_MOBILE = 60;
 
 const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
 const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100;
@@ -356,7 +355,7 @@ export default function FileRenderFloating(props: Props) {
                 top:
                   fileViewerRect.windowOffset +
                   fileViewerRect.top -
-                  (isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT) -
+                  (isMobile ? 0 : HEADER_HEIGHT) -
                   (IS_DESKTOP_MAC ? 24 : 0),
               }
             : {}
diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss
index e1d6b89bb..569e5dcec 100644
--- a/ui/scss/component/_content.scss
+++ b/ui/scss/component/_content.scss
@@ -3,6 +3,10 @@
   position: absolute;
   top: var(--spacing-s);
   border-radius: var(--border-radius);
+
+  @media (max-width: $breakpoint-small) {
+    border-radius: 0;
+  }
 }
 
 .content__viewer--disable-click {
@@ -175,6 +179,10 @@
     width: 100%;
     height: 100%;
   }
+
+  @media (max-width: $breakpoint-small) {
+    border-radius: 0;
+  }
 }
 
 .content__cover--text {