Bug fixes for search and direct messages (#4986)

* PLT-5145 - Fixing search popover on mobile

* PLT-5093 - Fixing direct messages list height

webapp/sass/components/_modal.scss

@@ -24,6 +24,10 @@
             min-height: 8em;
         }
 
+        .suggestion-list {
+            bottom: -149px;
+        }
+
         .suggestion-list__content {
             max-height: 150px;
         }
@@ -460,24 +464,10 @@
                 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;
@@ -492,7 +482,6 @@
         }
 
         .filter-row {
-            @include clearfix;
             margin: 5px 0 10px;
             width: 300px;
         }
@@ -557,7 +546,11 @@
 .more-modal__list {
     display: flex;
     flex-direction: column;
-    overflow: auto;
+
+    > div {
+        min-height: 100%;
+        overflow: auto;
+    }
 
     .popover & {
         font-size: .95em;
@@ -602,6 +595,7 @@
     .more-modal__actions {
         flex-grow: 0;
         flex-shrink: 0;
+        margin: 5px 0 10px;
         padding-left: 20px;
     }
 
@@ -624,8 +618,7 @@
     .more-modal__row {
         border-bottom: 1px solid $light-gray;
         display: flex;
-        min-height: 70px;
-        padding: 8px 15px;
+        padding: 10px 15px;
     }
 
     p {
@@ -646,16 +639,15 @@
 .filtered-user-list {
     display: flex;
     flex-direction: column;
+    height: calc(90vh - 120px);
     width: 100%;
 
-    .filter-row {
-        flex-grow: 0;
-        flex-shrink: 0;
+    > div {
+        flex: 1;
     }
 
-    .user-list {
-        flex-grow: 1;
-        flex-shrink: 1;
+    .more-modal__list {
+        flex-grow: 500;
     }
 
     .filter-button {
@@ -665,9 +657,6 @@
     }
 
     .filter-controls {
-        @include clearfix;
-        flex-grow: 0;
-        flex-shrink: 0;
         padding: 1em 1.5em 0;
 
         .filter-control__next {
@@ -679,10 +668,4 @@
         margin-left: 0;
         padding-left: 0;
     }
-}
-
-.channel-switch-modal {
-    .modal-body {
-        overflow: visible;
-    }
-}
+}

webapp/sass/components/_popover.scss

@@ -94,10 +94,13 @@
 
 .search-help-popover {
     font-size: em(13px);
-    margin-top: 17px !important;
     max-width: 300px;
     width: 100%;
 
+    &:not(.autocomplete) {
+        margin-top: 17px !important;
+    }
+
     &.autocomplete {
         display: block;