Merge pull request #2428 from dewanshDT/dewanshmobile/modal

fix: Moda content overflow and Preferences height

Author: lindapaiste

client/styles/components/_modal.scss

@@ -10,8 +10,13 @@
 .modal-content {
   @extend %modal;
   min-height: #{150 / $base-font-size}rem;
-  width: #{500 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
+  
+  @media (min-width: 770px) {
+    width: #{500 / $base-font-size}rem;
+    
+  }
+
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
   }

client/styles/components/_preferences.scss

@@ -10,7 +10,6 @@
   flex-direction: column;
   outline: none;
   height: calc(80vh - #{65 / $base-font-size}rem);
-  max-height: #{460 / $base-font-size}rem;
   & .react-tabs {
     max-height: 100%;
     display: flex;
@@ -19,6 +18,11 @@
   & .react-tabs__tab-panel {
     overflow-y: auto;
   }
+  
+  @media (min-width: 770px) {
+    max-height: #{460 / $base-font-size}rem;
+    
+  }
 }
 
 .preference__minus-button,