Fixing long usernames (#2821)

* Submitting a fix for popover titles

* Fixing heading for channels

* Fixing other minor corner cases for long username

webapp/sass/components/_popover.scss

@@ -18,7 +18,10 @@
 
     .popover-title {
         background: alpha-color($black, .05);
+        max-width: 100%;
+        overflow: hidden;
         padding: 8px 10px;
+        text-overflow: ellipsis;
     }
 
     .popover-content {

webapp/sass/layout/_headers.scss

@@ -82,6 +82,12 @@
     .channel-intro-profile {
         margin-left: 63px;
         margin-top: 5px;
+
+        .user-popover {
+            max-width: calc(100% - 100px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 
     .channel-intro-img {
@@ -106,6 +112,7 @@
 
     .channel-intro-text {
         margin-top: 35px;
+        word-break: break-all;
     }
 }
 
@@ -308,7 +315,7 @@
         font-size: 1.3em;
         font-weight: 600;
         margin: 0 4px 0 0;
-        max-width: 100%;
+        max-width: calc(100% - 50px);
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;

webapp/sass/layout/_navigation.scss

@@ -70,8 +70,12 @@
 
             .heading {
                 color: $white;
+                display: inline-block;
                 font-weight: 600;
                 margin-right: 3px;
+                overflow: hidden;
+                vertical-align: top;
+                width: calc(100% - 200px);
             }
 
             .header-dropdown__icon {

webapp/sass/responsive/_mobile.scss

@@ -11,6 +11,10 @@
         }
     }
 
+    .user-popover {
+        pointer-events: none;
+    }
+
     .signup-team__container {
         font-size: 1em;
     }