PLT-4609 - Fixing list modals on mobile (#4536)

* PLT-4609 - Fixing list modals on mobile

* PLT-4609 - Adjust more modal height

webapp/sass/components/_modal.scss

@@ -125,6 +125,7 @@
         }
 
         .modal-dialog {
+            margin-bottom: 0;
             margin-left: auto;
             margin-right: auto;
             max-width: 95%;
@@ -237,19 +238,6 @@
             top: 0;
         }
 
-        &.more-channel__modal {
-            .modal-body {
-                overflow-x: hidden;
-                padding: 10px 0 15px;
-            }
-
-            .channel-count {
-                @include opacity(.8);
-                float: right;
-                margin-top: 5px;
-            }
-        }
-
         .modal-image {
             height: 100%;
             margin: 0 auto;
@@ -449,9 +437,37 @@
                 }
             }
         }
+
+        &.more-channel__modal {
+            .modal-body {
+                overflow-x: hidden;
+                padding: 10px 0 15px;
+            }
+
+            .channel-count {
+                @include opacity(.8);
+                float: right;
+                margin-top: 5px;
+            }
+
+            .more-modal__list {
+                max-height: calc(100vh - 270px);
+            }
+        }
     }
 
     .more-modal {
+        .more-modal__list {
+            height: 100vh;
+            max-height: calc(100vh - 340px);
+        }
+
+        &.more-direct-channels {
+            .more-modal__list {
+                max-height: calc(100vh - 325px);
+            }
+        }
+
         .user-list {
             margin-top: 10px;
             overflow-x: hidden;

webapp/sass/responsive/_mobile.scss

@@ -9,8 +9,6 @@
     }
 
     .filtered-user-list {
-        max-height: 65vh !important;
-
         .filter-button {
             .btn {
                 width: 100%;
@@ -1314,7 +1312,34 @@
     }
 
     .app__body {
+        .more-modal {
+            .modal-body {
+                padding-bottom: 5px;
+            }
+
+            .more-modal__list {
+                max-height: calc(100vh - 260px);
+            }
+
+            &.more-direct-channels {
+                .more-modal__list {
+                    max-height: calc(100vh - 295px);
+                }
+            }
+        }
+
         .modal {
+            &.more-channel__modal {
+                .more-modal__list {
+                    max-height: calc(100vh - 250px);
+                }
+
+                .modal-body {
+                    padding-bottom: 35px;
+                }
+
+            }
+
             .settings-modal {
                 &.display--content {
                     .modal-body {
@@ -1324,6 +1349,7 @@
 
                 .modal-body {
                     max-height: 70%;
+                    padding-bottom: 0;
                 }
 
                 .settings-table {