Shorten username if chevron becomes invisible

See issue #9

packages/auth/src/auth.js

@@ -413,6 +413,13 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
             .loginbox .label {
                 padding-left: 0.2em;
             }
+            
+            .ellipsis {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: inline-block;
+            }
         `;
     }
 
@@ -445,12 +452,13 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
 
     renderLoggedIn() {
         const imageURL = (this.showImage && this.person && this.person.image) ? this.person.image : null;
+        const w = window.innerWidth/2 - 20 - 40;
 
         return html`
             <div class="dropdown" @click="${this.onDropdownClick}">
                 <div class="dropdown-trigger">
                     <a href="#">
-                        <span>${this.name}</span>
+                        <div class="ellipsis" style="max-width: ${w}px;">${this.name}</div>
                         <vpu-icon name="chevron-down" id="menu-chevron-icon"></vpu-icon>
                     </a>
                 </div>