Minor UI fixes for 4.0 (#6899)

* PLT-7056 - Fixing profile popover position

* PLT-7082 - Removing extra space below header

* PLT-7074 - Channel header fix

* PLT-7054 - Fixing scroll inside members popover

* Updating mention highlight color for default theme

6 files changed, 23 insertions, 22 deletions

diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx
index 22d6b6b77..1cd2ef637 100644
--- a/webapp/components/user_profile.jsx
+++ b/webapp/components/user_profile.jsx
@@ -56,10 +56,6 @@ export default class UserProfile extends React.Component {
     render() {
         let name = '...';
         let profileImg = '';
-        let popoverPosition = 'right';
-        if (Utils.isMobile()) {
-            popoverPosition = 'bottom';
-        }
 
         if (this.props.user) {
             name = Utils.displayUsername(this.props.user.id);
@@ -78,7 +74,7 @@ export default class UserProfile extends React.Component {
             <OverlayTrigger
                 ref='overlay'
                 trigger='click'
-                placement={popoverPosition}
+                placement='right'
                 rootClose={true}
                 overlay={
                     <ProfilePopover
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 46e83f32d..90573c7ec 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -242,6 +242,7 @@
             border-top: 1px solid;
             cursor: pointer;
             height: 45px;
+            overflow: hidden;
             padding: 5px 19px 5px 17px;
 
             &:hover {
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index b515e40cf..1ca81c880 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -197,13 +197,13 @@
         display: inline-block;
         height: 35px;
         margin-top: -10px;
-        max-width: calc(100vw - 720px);
+        max-width: calc(100vw - 740px);
         overflow: hidden;
         padding: 3px 0 0;
         position: relative;
         text-overflow: ellipsis;
         top: 10px;
-        white-space: nowrap;
+        white-space: pre;
         word-break: break-word;
 
         .markdown__heading {
@@ -212,7 +212,7 @@
         }
 
         .multi-teams & {
-            max-width: calc(100vw - 790px);
+            max-width: calc(100vw - 810px);
         }
 
         &.light {
@@ -226,10 +226,10 @@
         }
 
         .move--left & {
-            max-width: calc(100vw - 790px);
+            max-width: calc(100vw - 810px);
 
             .multi-teams & {
-                max-width: calc(100vw - 840px);
+                max-width: calc(100vw - 860px);
             }
         }
 
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index f48c15b16..1cfe2b37c 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1043,8 +1043,8 @@
         @include single-transition(transform, .35s, ease);
         @include translate3d(290px, 0, 0);
         border: none;
-        width: 290px;
         visibility: hidden;
+        width: 290px;
 
         &.visible {
             display: block;
@@ -1287,10 +1287,10 @@
 
     .app__content {
         margin: 0;
-        padding-top: 56px;
+        padding-top: 50px;
 
         .channel__wrap & {
-            padding-top: 56px;
+            padding-top: 50px;
         }
 
         #channel-header {
@@ -1575,6 +1575,10 @@
 }
 
 @media screen and (max-width: 480px) {
+    #user-profile-popover {
+        left: 50px !important;
+    }
+
     .post {
         .img-div {
             max-width: 100%;
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 8b81f30ca..ef4c2e8e5 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -5,20 +5,20 @@
         &.move--left {
             .channel-header {
                 .heading {
-                    max-width: calc(100vw - 600px);
+                    max-width: calc(100vw - 620px);
 
                     .multi-teams & {
-                        max-width: calc(100vw - 650px);
+                        max-width: calc(100vw - 670px);
                     }
                 }
             }
 
             .channel-header__info {
                 .channel-header__description {
-                    max-width: calc(100vw - 600px);
+                    max-width: calc(100vw - 620px);
 
                     .multi-teams & {
-                        max-width: calc(100vw - 650px);
+                        max-width: calc(100vw - 670px);
                     }
                 }
             }
@@ -34,20 +34,20 @@
 
     .channel-header__info {
         .channel-header__description {
-            max-width: calc(100vw - 660px);
+            max-width: calc(100vw - 680px);
 
             .multi-teams & {
-                max-width: calc(100vw - 710px);
+                max-width: calc(100vw - 730px);
             }
         }
     }
 
     .channel-header {
         .heading {
-            max-width: calc(100vw - 700px);
+            max-width: calc(100vw - 720px);
 
             .multi-teams & {
-                max-width: calc(100vw - 750px);
+                max-width: calc(100vw - 770px);
             }
         }
     }
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index b2693ecf5..abe891e28 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -493,7 +493,7 @@ export const Constants = {
             buttonBg: '#166de0',
             buttonColor: '#ffffff',
             errorTextColor: '#fd5960',
-            mentionHighlightBg: '#fff2bb',
+            mentionHighlightBg: '#ffe577',
             mentionHighlightLink: '#166de0',
             codeTheme: 'github',
             image: mattermostThemeImage