Revert "Ui fixes" (#4963)

3 files changed, 47 insertions, 32 deletions

diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index 1d3f1d052..f595e0ed9 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -26,11 +26,6 @@ body {
     word-break: break-all;
 }
 
-.overflow--ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .fa {
     &.fa-margin--left {
         margin-left: 2px;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index f98d23341..d17ba1706 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -460,10 +460,24 @@
                 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;
@@ -478,6 +492,7 @@
         }
 
         .filter-row {
+            @include clearfix;
             margin: 5px 0 10px;
             width: 300px;
         }
@@ -542,11 +557,7 @@
 .more-modal__list {
     display: flex;
     flex-direction: column;
-
-    > div {
-        min-height: 100%;
-        overflow: auto;
-    }
+    overflow: auto;
 
     .popover & {
         font-size: .95em;
@@ -591,7 +602,6 @@
     .more-modal__actions {
         flex-grow: 0;
         flex-shrink: 0;
-        margin: 5px 0 10px;
         padding-left: 20px;
     }
 
@@ -614,7 +624,8 @@
     .more-modal__row {
         border-bottom: 1px solid $light-gray;
         display: flex;
-        padding: 10px 15px;
+        min-height: 70px;
+        padding: 8px 15px;
     }
 
     p {
@@ -635,15 +646,16 @@
 .filtered-user-list {
     display: flex;
     flex-direction: column;
-    height: calc(90vh - 120px);
     width: 100%;
 
-    > div {
-        flex: 1;
+    .filter-row {
+        flex-grow: 0;
+        flex-shrink: 0;
     }
 
-    .more-modal__list {
-        flex-grow: 500;
+    .user-list {
+        flex-grow: 1;
+        flex-shrink: 1;
     }
 
     .filter-button {
@@ -653,6 +665,9 @@
     }
 
     .filter-controls {
+        @include clearfix;
+        flex-grow: 0;
+        flex-shrink: 0;
         padding: 1em 1.5em 0;
 
         .filter-control__next {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 02525aec5..d9a929690 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1214,16 +1214,6 @@
 }
 
 @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 {
@@ -1231,6 +1221,10 @@
                     max-height: calc(100vh - 62px);
                     padding-bottom: 5px;
                 }
+
+                .more-modal__list {
+                    max-height: calc(100vh - 230px);
+                }
             }
         }
 
@@ -1391,14 +1385,15 @@
 @media screen and (max-width: 550px) {
     .app__body {
         .more-modal {
-            &.more-system-members {
-                .filter-row {
-                    min-height: 80px;
-                    width: 100%;
-                }
+            .filter-row {
+                width: 100%;
             }
 
             &.more-direct-channels {
+                .filter-row {
+                    padding-bottom: 50px;
+                }
+
                 .member-show {
                     display: none;
                 }
@@ -1456,6 +1451,16 @@
 
     .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 {