access request: layout adjustments (mobile devices) (#3404)

Co-authored-by: Stefano Ricci <[email protected]> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
openforis · May 7, 2024 · ff294e0 · ff294e0
1 parent 894fd42
commit ff294e0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/webapp/style/main.scss b/webapp/style/main.scss
@@ -36,6 +36,14 @@ body {
   height: 100vh;
 }
 
+@media screen and (max-width: 768px) {
+  #main {
+    /* 100vh not working properly in mobile devices browsers
+     (see https://bugs.webkit.org/show_bug.cgi?id=141832) */
+    height: 92vh;
+  }
+}
+
 .main__system-error {
   @include full-screen-fixed();
   display: grid;

diff --git a/webapp/views/Arena/Routes/Notification/Notification.scss b/webapp/views/Arena/Routes/Notification/Notification.scss
@@ -1,6 +1,7 @@
 @import 'webapp/style/vars';
 
 $appNotificationWidth: 500px;
+$appNotificationWidthSmallScreens: 90vw;
 
 .notification {
   position: fixed;
@@ -23,6 +24,13 @@ $appNotificationWidth: 500px;
   }
 }
 
+@media screen and (max-width: 768px) {
+  .notification {
+    width: $appNotificationWidthSmallScreens;
+    transform: translate(calc(50vw - #{$appNotificationWidthSmallScreens / 2}), 15px);
+  }
+}
+
 .notification.info {
   background-color: lighten($blueLightActive, 18%);
   border-color: lighten($blueLightActive, 5%);

diff --git a/webapp/views/Guest/Error/Error.scss b/webapp/views/Guest/Error/Error.scss
@@ -5,9 +5,16 @@
   font-size: 0.9rem;
   font-weight: 600;
   color: white;
-  padding: 0.5rem 0;
+  padding: 0.5rem;
   position: fixed;
   width: 30vw;
   left: 35vw;
-  top: 15vh;
+  top: 20px;
+}
+
+@media screen and (max-width: 768px) {
+  .guest-errors {
+    width: 80vw;
+    left: 10vw;
+  }
 }