Ui improvements (#7092)

* PLT-7121 - Making channel header text dynamic

* PLT-7268 - Fixing search results in compact view

* PLT-7248 - Adjusting space between post controls

* PLT-7303 - Fixing manage members button

* Revert "PLT-7303 - Fixing manage members button"

This reverts commit 7dcb68a8e333a2c95444d417ed9a244c9c30aa99.

7 files changed, 28 insertions, 124 deletions

diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index 4461b1da1..1c3200a71 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -118,6 +118,10 @@
             border: none;
         }
 
+        .post__header {
+            padding-right: 70px;
+        }
+
         .search-channel__name {
             font-weight: 600;
             margin: 0 0 10px;
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 44b8ab4f0..0a836eafd 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -8,6 +8,24 @@
     width: 100%;
     z-index: 9;
 
+    .flex-parent {
+        display: flex;
+    }
+
+    .flex-child {
+        &:first-child {
+            flex: 1;
+            min-width: 0;
+            padding-left: 20px;
+        }
+
+        .markdown__paragraph-inline {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: calc(100% - 50px);
+        }
+    }
+
     .channel-header__icon {
         @include border-radius(50%);
         border: 1px solid;
@@ -89,55 +107,16 @@
         }
     }
 
-    th {
-        text-align: center;
-
-        &:first-child {
-            border-left: none;
-            padding: 0 0 0 20px;
-            text-align: left !important;
-            width: 100%;
-        }
-
-        &:last-child {
-            .channel-header__icon {
-                margin-right: 17px;
-            }
-        }
-    }
-
-    td {
-        font-size: 13px;
-        padding: 5px 25px 5px !important;
-        text-align: center !important;
-
-        &:first-child {
-            text-align: left !important;
-        }
-    }
-
     .heading {
         display: inline-block;
         font-size: 17px;
         font-weight: 400;
         margin: 0 4px 0 0;
-        max-width: calc(100vw - 780px);
+        max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: top;
         white-space: nowrap;
-
-        .move--left & {
-            max-width: calc(100vw - 850px);
-
-            .multi-teams & {
-                max-width: calc(100vw - 905px);
-            }
-        }
-
-        .multi-teams & {
-            max-width: calc(100vw - 850px);
-        }
     }
 
     .caret {
@@ -177,6 +156,7 @@
 
 .channel-header__info {
     margin-top: 12px;
+    white-space: nowrap;
 
     .channel-header__title {
         .header-dropdown__icon {
@@ -186,6 +166,7 @@
         > a {
             display: inline-block;
             text-decoration: none;
+            width: calc(100% - 65px);
         }
 
         .modal {
@@ -194,27 +175,18 @@
     }
 
     .channel-header__description {
-        display: inline-block;
         height: 35px;
-        margin-top: -10px;
-        max-width: calc(100vw - 740px);
         overflow: hidden;
         padding: 3px 0 0;
         position: relative;
         text-overflow: ellipsis;
-        top: 10px;
-        white-space: pre;
-        word-break: break-word;
+        width: calc(100% - 18px);
 
         .markdown__heading {
             font-size: 1em;
             margin: 0;
         }
 
-        .multi-teams & {
-            max-width: calc(100vw - 810px);
-        }
-
         &.light {
             @include opacity(.6);
             color: inherit;
@@ -225,14 +197,6 @@
             }
         }
 
-        .move--left & {
-            max-width: calc(100vw - 810px);
-
-            .multi-teams & {
-                max-width: calc(100vw - 860px);
-            }
-        }
-
         .markdown-inline-img {
             max-height: 45px;
         }
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index e6ee33f85..1442a8de8 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -35,7 +35,7 @@
                 border: none !important;
                 right: 5px;
                 text-align: right;
-                top: 0;
+                top: -3px;
             }
         }
 
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index d7a18b587..73654923f 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -47,7 +47,7 @@
 
             &:last-child {
                 .channel-header__icon {
-                    margin-right: 17px;
+                    margin-right: 10px;
                 }
             }
         }
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index 184b57710..fdc318457 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -86,22 +86,6 @@
                 width: 150px;
             }
         }
-
-        .heading {
-            max-width: calc(100vw - 800px);
-
-            .multi-teams & {
-                max-width: calc(100vw - 775px);
-            }
-        }
-    }
-
-    .channel-header__info {
-        .channel-header__description {
-            .multi-teams & {
-                max-width: calc(100vw - 730px);
-            }
-        }
     }
 
     .integration-option {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index de453f93f..ba830000a 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1624,10 +1624,6 @@
                     height: auto;
                 }
             }
-
-            .post__header {
-                padding-right: 50px;
-            }
         }
     }
 
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index ef68d5175..55dd59a4c 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -1,30 +1,6 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 960px) {
-    .inner-wrap {
-        &.move--left {
-            .channel-header {
-                .heading {
-                    max-width: calc(100vw - 620px);
-
-                    .multi-teams & {
-                        max-width: calc(100vw - 670px);
-                    }
-                }
-            }
-
-            .channel-header__info {
-                .channel-header__description {
-                    max-width: calc(100vw - 620px);
-
-                    .multi-teams & {
-                        max-width: calc(100vw - 670px);
-                    }
-                }
-            }
-        }
-    }
-
     .textarea-wrapper {
         .textbox-preview-link,
         .textbox-help-link {
@@ -32,26 +8,6 @@
         }
     }
 
-    .channel-header__info {
-        .channel-header__description {
-            max-width: calc(100vw - 680px);
-
-            .multi-teams & {
-                max-width: calc(100vw - 730px);
-            }
-        }
-    }
-
-    .channel-header {
-        .heading {
-            max-width: calc(100vw - 720px);
-
-            .multi-teams & {
-                max-width: calc(100vw - 770px);
-            }
-        }
-    }
-
     .post-right__scroll {
         .post-create__container {
             .post-create-body {