Don't enforce a minimal content width with the user name

By setting a max-width on the element it will use ellipsis to shorten the
user name

packages/auth/src/auth.js

@@ -370,10 +370,6 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
                 min-width: 150px;
             }
 
-            .dropdown-trigger {
-                white-space: nowrap;
-            }
-
             vpu-icon {
                 height: 1em;
                 width: 1em;
@@ -406,13 +402,22 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
                 fill: var(--vpu-light);
             }
 
-            .loginbox .icon, .authbox {
-                display: inline-block;
-            }
-
             .loginbox .label {
                 padding-left: 0.2em;
             }
+
+            .dropdown-trigger {
+                display: flex;
+                align-items: center;
+            }
+
+            .dropdown-trigger .name {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-width: 0;
+                margin-right: 0.5em
+            }
         `;
     }
 
@@ -448,12 +453,13 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
 
         return html`
             <div class="dropdown" @click="${this.onDropdownClick}">
-                <div class="dropdown-trigger">
-                    <a href="#">
-                        <span>${this.name}</span>
+                <a href="#">
+                    <div class="dropdown-trigger">
+                        <div class="name">${this.name}</div>
                         <vpu-icon name="chevron-down" id="menu-chevron-icon"></vpu-icon>
-                    </a>
-                </div>
+
+                    </div>
+                </a>
                 <div class="dropdown-menu" id="dropdown-menu2" role="menu">
                     <div class="dropdown-content" @blur="${this.closeDropdown}">
                         ${imageURL ? html`<div class="dropdown-item"><img alt="" src="${imageURL}"></div>` : ''}

packages/auth/src/vpu-auth-demo.js

@@ -78,6 +78,10 @@ class AuthDemo extends ScopedElementsMixin(LitElement) {
                     font-weight: 600;
                     line-height: 1.125;
                 }
+
+                .container * {
+                    max-width: 100%;
+                }
             </style>
             <section class="section">
                 <div class="container">