studio - plans for/truncates long usernames in main nav

cms/static/sass/elements/_header.scss

@@ -29,7 +29,6 @@
 
   .wrapper-l {
     float: left;
-    margin-right: flex-gutter();
     width: flex-grid(7,12);
   }
 
@@ -45,11 +44,15 @@
     vertical-align: middle;
   }
 
+  .nav-account {
+    width: 100%;
+  }
+
   // basic layout - nav items
   nav {
 
     > ol > .nav-item {
-      @extend .t-action2;
+      @extend .t-action3;
       display: inline-block;
       vertical-align: middle;
       font-weight: 600;
@@ -193,11 +196,16 @@
 
     .nav-account-user {
 
-      .account-username {
-        width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+      .title {
+        max-width: ($baseline*6.5);
+
+        > .label {
+          display: inline-block;
+          max-width: 85%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
       }
     }
   }

cms/static/sass/elements/_navigation.scss

@@ -28,7 +28,8 @@ nav {
   .title {
 
     .label, .icon-caret-down {
-
+      display: inline-block;
+      vertical-align: middle;
     }
 
     .ui-toggle-dd {

cms/templates/widgets/header.html

@@ -116,7 +116,7 @@
           </li>
 
           <li class="nav-item nav-account-user">
-            <h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
+            <h3 class="title"><span class="label"><span class="label-prefix sr">Currently signed in as:</span><span class="account-username" title="${ user.username }">${ user.username }</span></span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">