diff --git a/packages/auth/src/auth.js b/packages/auth/src/auth.js index a38149578098fc51ce463a7ebd1d4ac70ec8166a..dbfa2d5797b79be473ecddd8b2fbe6fdec0d1ec0 100644 --- a/packages/auth/src/auth.js +++ b/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>