Bug fixes for search and direct messages (#4986)

* PLT-5145 - Fixing search popover on mobile

* PLT-5093 - Fixing direct messages list height

1 files changed, 23 insertions, 22 deletions

diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index d9a929690..8fcf2e94e 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -427,8 +427,14 @@
     }
 
     .search-help-popover {
+        left: 0 !important;
         margin-left: 10px;
-        max-width: calc(100% - 20px);
+        max-width: calc(100% - 80px);
+
+        .focused & {
+            left: 45px !important;
+            margin-top: 50px;
+        }
     }
 
     .modal-direct-channels,
@@ -1085,7 +1091,7 @@
                 .post-error {
                     top: 0;
                     left: 0;
-              }
+                }
             }
         }
 
@@ -1214,6 +1220,16 @@
 }
 
 @media screen and (max-width: 640px) {
+    .filtered-user-list {
+        height: calc(100vh - 80px);
+    }
+
+    .more-modal--action {
+        .filtered-user-list {
+            height: calc(100vh - 110px);
+        }
+    }
+
     .app__body {
         .modal {
             .more-modal {
@@ -1221,10 +1237,6 @@
                     max-height: calc(100vh - 62px);
                     padding-bottom: 5px;
                 }
-
-                .more-modal__list {
-                    max-height: calc(100vh - 230px);
-                }
             }
         }
 
@@ -1385,15 +1397,14 @@
 @media screen and (max-width: 550px) {
     .app__body {
         .more-modal {
-            .filter-row {
-                width: 100%;
-            }
-
-            &.more-direct-channels {
+            &.more-system-members {
                 .filter-row {
-                    padding-bottom: 50px;
+                    min-height: 80px;
+                    width: 100%;
                 }
+            }
 
+            &.more-direct-channels {
                 .member-show {
                     display: none;
                 }
@@ -1451,16 +1462,6 @@
 
     .app__body {
         .modal {
-            &.more-channel__modal {
-                .more-modal__list {
-                    max-height: calc(100vh - 250px);
-                }
-
-                .modal-body {
-                    padding-bottom: 35px;
-                }
-            }
-
             .settings-modal {
                 &.display--content {
                     .modal-body {