From 938caa061d4f5aad00133926c86d3d6f4485b3a2 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com>
Date: Thu, 28 Apr 2016 23:52:22 +0500
Subject: 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 | 3 +++
 webapp/sass/layout/_headers.scss     | 9 ++++++++-
 webapp/sass/layout/_navigation.scss  | 4 ++++
 webapp/sass/responsive/_mobile.scss  | 4 ++++
 4 files changed, 19 insertions(+), 1 deletion(-)

(limited to 'webapp/sass')

diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 0b2769f77..7526fcb5a 100644
--- a/webapp/sass/components/_popover.scss
+++ b/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 {
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 950588df5..b4b6e9cbc 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/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;
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 3daf6e56b..2008b247a 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/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 {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index f2a1cf819..3a4cd3b89 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -11,6 +11,10 @@
         }
     }
 
+    .user-popover {
+        pointer-events: none;
+    }
+
     .signup-team__container {
         font-size: 1em;
     }
-- 
cgit v1.2.3-1-g7c22