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.

9 files changed, 124 insertions, 224 deletions

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index bee06c700..42e66fd3a 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -841,107 +841,103 @@ export default class ChannelHeader extends React.Component {
                 id='channel-header'
                 className='channel-header alt'
             >
-                <table>
-                    <tbody>
-                        <tr>
-                            <th>
-                                <div className='channel-header__info'>
-                                    {toggleFavorite}
-                                    <div className='channel-header__title dropdown'>
-                                        <a
-                                            id='channelHeaderDropdown'
-                                            href='#'
-                                            className='dropdown-toggle theme'
-                                            type='button'
-                                            data-toggle='dropdown'
-                                            aria-expanded='true'
-                                        >
-                                            <strong className='heading'>{channelTitle} </strong>
-                                            <span className='fa fa-angle-down header-dropdown__icon'/>
-                                        </a>
-                                        <ul
-                                            className='dropdown-menu'
-                                            role='menu'
-                                            aria-labelledby='channel_header_dropdown'
-                                        >
-                                            {dropdownContents}
-                                        </ul>
-                                    </div>
-                                    {headerTextContainer}
-                                </div>
-                            </th>
-                            <th>
-                                {webrtc}
-                            </th>
-                            <th>
-                                {popoverListMembers}
-                            </th>
-                            <th>
-                                <OverlayTrigger
-                                    trigger={['hover', 'focus']}
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                    placement='bottom'
-                                    overlay={pinnedPostTooltip}
-                                >
-                                    <div
-                                        className={pinnedIconClass}
-                                        onClick={this.getPinnedPosts}
-                                    >
-                                        <span
-                                            className='icon icon__pin'
-                                            dangerouslySetInnerHTML={{__html: pinIcon}}
-                                            aria-hidden='true'
-                                        />
-                                    </div>
-                                </OverlayTrigger>
-                            </th>
-                            <th className='search-bar__container'>
-                                <NavbarSearchBox
-                                    showMentionFlagBtns={false}
-                                    isFocus={Utils.isMobile()}
-                                />
-                            </th>
-                            <th>
-                                <OverlayTrigger
-                                    trigger={['hover', 'focus']}
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                    placement='bottom'
-                                    overlay={recentMentionsTooltip}
+                <div className='flex-parent'>
+                    <div className='flex-child'>
+                        <div className='channel-header__info'>
+                            {toggleFavorite}
+                            <div className='channel-header__title dropdown'>
+                                <a
+                                    id='channelHeaderDropdown'
+                                    href='#'
+                                    className='dropdown-toggle theme'
+                                    type='button'
+                                    data-toggle='dropdown'
+                                    aria-expanded='true'
                                 >
-                                    <div
-                                        className='channel-header__icon icon--hidden'
-                                        onClick={this.searchMentions}
-                                    >
-                                        <span
-                                            className='icon icon__mentions'
-                                            dangerouslySetInnerHTML={{__html: mentionsIcon}}
-                                            aria-hidden='true'
-                                        />
-                                    </div>
-                                </OverlayTrigger>
-                            </th>
-                            <th>
-                                <OverlayTrigger
-                                    trigger={['hover', 'focus']}
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                    placement='bottom'
-                                    overlay={flaggedTooltip}
+                                    <strong className='heading'>{channelTitle} </strong>
+                                    <span className='fa fa-angle-down header-dropdown__icon'/>
+                                </a>
+                                <ul
+                                    className='dropdown-menu'
+                                    role='menu'
+                                    aria-labelledby='channel_header_dropdown'
                                 >
-                                    <div
-                                        className='channel-header__icon icon--hidden'
-                                        onClick={this.getFlagged}
-
-                                    >
-                                        <span
-                                            className='icon icon__flag'
-                                            dangerouslySetInnerHTML={{__html: flagIcon}}
-                                        />
-                                    </div>
-                                </OverlayTrigger>
-                            </th>
-                        </tr>
-                    </tbody>
-                </table>
+                                    {dropdownContents}
+                                </ul>
+                            </div>
+                            {headerTextContainer}
+                        </div>
+                    </div>
+                    <div className='flex-child'>
+                        {webrtc}
+                    </div>
+                    <div className='flex-child'>
+                        {popoverListMembers}
+                    </div>
+                    <div className='flex-child'>
+                        <OverlayTrigger
+                            trigger={['hover', 'focus']}
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='bottom'
+                            overlay={pinnedPostTooltip}
+                        >
+                            <div
+                                className={pinnedIconClass}
+                                onClick={this.getPinnedPosts}
+                            >
+                                <span
+                                    className='icon icon__pin'
+                                    dangerouslySetInnerHTML={{__html: pinIcon}}
+                                    aria-hidden='true'
+                                />
+                            </div>
+                        </OverlayTrigger>
+                    </div>
+                    <div className='flex-child search-bar__container'>
+                        <NavbarSearchBox
+                            showMentionFlagBtns={false}
+                            isFocus={Utils.isMobile()}
+                        />
+                    </div>
+                    <div className='flex-child'>
+                        <OverlayTrigger
+                            trigger={['hover', 'focus']}
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='bottom'
+                            overlay={recentMentionsTooltip}
+                        >
+                            <div
+                                className='channel-header__icon icon--hidden'
+                                onClick={this.searchMentions}
+                            >
+                                <span
+                                    className='icon icon__mentions'
+                                    dangerouslySetInnerHTML={{__html: mentionsIcon}}
+                                    aria-hidden='true'
+                                />
+                            </div>
+                        </OverlayTrigger>
+                    </div>
+                    <div className='flex-child'>
+                        <OverlayTrigger
+                            trigger={['hover', 'focus']}
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='bottom'
+                            overlay={flaggedTooltip}
+                        >
+                            <div
+                                className='channel-header__icon icon--hidden'
+                                onClick={this.getFlagged}
+
+                            >
+                                <span
+                                    className='icon icon__flag'
+                                    dangerouslySetInnerHTML={{__html: flagIcon}}
+                                />
+                            </div>
+                        </OverlayTrigger>
+                    </div>
+                </div>
                 {editHeaderModal}
                 {editPurposeModal}
                 {channelMembersModal}
diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 929dc379e..c120f3cde 100644
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -126,7 +126,7 @@ export default class SearchResultsItem extends React.Component {
         let className = 'post post--thread';
 
         if (this.props.compactDisplay) {
-            className = ' post--compact';
+            className += ' post--compact';
         }
 
         if (this.state.dropdownOpened) {
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 {