[Glitch] Improve focal point modal on mobile

Port 2ca6b2bb6c9e811ad98e3df23e70efbf22882e42 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

1 files changed, 17 insertions, 10 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 60c084d99..ec32c9114 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -528,7 +528,8 @@
   }
 }
 
-.report-modal__statuses {
+.report-modal__statuses,
+.focal-point-modal__content {
   flex: 1 1 auto;
   min-height: 20vh;
   max-height: 80vh;
@@ -544,6 +545,12 @@
   }
 }
 
+.focal-point-modal__content {
+  @media screen and (max-width: 480px) {
+    max-height: 40vh;
+  }
+}
+
 .report-modal__comment {
   padding: 20px;
   border-right: 1px solid $ui-secondary-color;
@@ -638,15 +645,6 @@
   }
 }
 
-.report-modal__target {
-  padding: 20px;
-
-  .media-modal__close {
-    top: 19px;
-    right: 15px;
-  }
-}
-
 .actions-modal {
   .status {
     overflow-y: auto;
@@ -765,6 +763,15 @@
   }
 }
 
+.report-modal__target {
+  padding: 15px;
+
+  .media-modal__close {
+    top: 14px;
+    right: 15px;
+  }
+}
+
 .embed-modal {
   max-width: 80vw;
   max-height: 80vh;