diff --git a/ui/widgets/nuxeo-user-avatar.js b/ui/widgets/nuxeo-user-avatar.js index a874c529e..40b6ce7a1 100644 --- a/ui/widgets/nuxeo-user-avatar.js +++ b/ui/widgets/nuxeo-user-avatar.js @@ -62,12 +62,18 @@ import '../nuxeo-icons.js'; width: 12px; fill: white; } + + .user-initial { + white-space: nowrap; + overflow: hidden; + max-width: 15px; + } `; diff --git a/ui/widgets/nuxeo-user-tag.js b/ui/widgets/nuxeo-user-tag.js index d927e1916..7f3124785 100644 --- a/ui/widgets/nuxeo-user-tag.js +++ b/ui/widgets/nuxeo-user-tag.js @@ -59,10 +59,20 @@ import './nuxeo-tooltip.js'; @apply --nuxeo-link-hover; } - .user-tag { + .user-tag-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + max-width: 100px; + } + + .user-tag-wrap { + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } @@ -79,7 +89,12 @@ import './nuxeo-tooltip.js'; @@ -177,6 +192,12 @@ import './nuxeo-tooltip.js'; _preventPropagation(e) { e.stopPropagation(); } + + _getUserTagClass(user) { + const userFullName = this._name(user); + const nameContainsWhiteSpace = /\s/.test(userFullName); + return nameContainsWhiteSpace ? 'user-tag-wrap' : 'user-tag-nowrap'; + } } customElements.define(UserTag.is, UserTag);