variable width user-dropdown

app/styles/components/_dropdown.scss

@@ -31,8 +31,7 @@ $dropdown-caret-color                : $mid-grey !default;
   left: auto;
   display: none; // none by default, but block on "open" of the menu
   float: left;
-  min-width: 200px;
-  max-width: 400px;
+  max-width: 100vw;
   padding: 0;
   margin: 0; // override default ul
   list-style: none;

app/styles/components/_github-avatar.scss

@@ -1,4 +1,5 @@
 $gh-block-color: $text-color;
+$size: 35px;
 
 .gh-block-list {
   margin-bottom: 0;
@@ -13,8 +14,12 @@ $gh-block-color: $text-color;
 }
 
 .gh-block {
+  width: calc(100% + #{$size});
+  white-space: nowrap;
+
   .gh-block-content {
     line-height: initial;
+    margin-right: 35px; // temp but adds space for non-existent floated avatar
   }
 
   .gh-avatar {
@@ -42,7 +47,6 @@ $gh-block-color: $text-color;
   }
 }
 
-$size: 35px;
 
 .gh-avatar {
   width: $size;

lib/shared/addon/components/identity-block/template.hbs

@@ -20,7 +20,7 @@
 {{/if}}
 
 <div class="gh-block-content">
-  <div class="clip gh-block-name">
+  <div class="gh-block-name">
     {{#if loading}}
       {{t 'identityBlock.loading'}}
     {{else}}
@@ -28,7 +28,9 @@
         <a href="{{principal.profileURL}}" target="_blank">{{login}}</a>
       {{else}}
         {{#if principal.displayName}}
-          {{principal.displayName}} <small>(&nbsp;{{principal.loginName}}&nbsp;)</small>
+          <div>
+            {{principal.displayName}} {{#if principal.loginName }}<small>(&nbsp;{{principal.loginName}}&nbsp;)</small>{{/if}}
+          </div>
         {{else if principal.loginName}}
             {{principal.loginName}}
         {{else}}

lib/shared/addon/mixins/hover-dropdowns.js

@@ -247,6 +247,7 @@ export default Mixin.create({
   },
 
   showMenu: function(el, drpd, offset) {
+    drpd.css({width: drpd.width()});
     drpd.addClass('invisible');
     drpd.addClass('block');
     positionDropdown(drpd, el, drpd.hasClass('dropdown-menu-right'), offset);

vendor/dropdown/bootstrap.css

@@ -12,7 +12,6 @@
   z-index: 1000;
   display: none;
   float: left;
-  min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0;
   list-style: none;