Merge pull request #2346 from dewanshDT/dewanshmobile/overlayscss

Mobile overlay fix: works on smaller devices

Author: lindapaiste

client/styles/components/_overlay.scss

@@ -23,15 +23,22 @@
   flex-wrap: wrap;
   flex-flow: column;
   max-height: 80%;
+  max-width: 80%;
   position: relative;
   padding-bottom: #{25 / $base-font-size}rem;
+
+  @media (max-width: 650px) {
+    max-width: 100%;
+    max-height: 100%;
+    height: 100vh;
+    width: 100vw;
+  }
 }
 
 .overlay__header {
   display: flex;
   justify-content: space-between;
   padding: #{20 / $base-font-size}rem;
-  flex: 1 0 auto;
 }
 
 .overlay__actions {
@@ -49,10 +56,9 @@
 
 /* Fixed height overlay */
 .overlay--is-fixed-height .overlay__body {
-  height: 80vh;
+  height: 100vh;
 }
 
 .overlay--is-fixed-height .overlay__header {
   flex: 0;
 }
-