Add a max-width to user name in the header, fixes #7676

closes #8313

Changelog.md

@@ -9,6 +9,7 @@
 
 ## Bug fixes
 * Ensure the log folder exists [#8287](https://github.com/diaspora/diaspora/pull/8287)
+* Limit name length in header [#8313] (https://github.com/diaspora/diaspora/pull/8313)
 
 ## Features
 * Add tags to tumblr posts [#8244](https://github.com/diaspora/diaspora/pull/8244)

app/assets/stylesheets/header.scss

@@ -119,6 +119,19 @@
     }
   }
 
+  .dropdown-toggle {
+    align-items: center;
+    display: flex;
+
+    .user-name {
+      margin-right: 3px;
+      max-width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   .user-menu-dropdown {
     padding: 0;
   }

app/assets/templates/header_tpl.jst.hbs

@@ -69,7 +69,7 @@
           <ul class="nav navbar-nav navbar-right">
             <li class="dropdown user-menu" id="user-menu">
               <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown" role="button" aria-expanded="false">
-                <span class="user-avatar pull-left">
+                <span class="user-avatar">
                   {{{personImage current_user "small"}}}
                 </span>
                 <span class="user-name">{{current_user.name}}</span>