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;
+ }
- {{_output}}
+ {{_output}}
`;
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';
- [[_name(user)]]
+ [[_name(user)]]
+
+ [[_name(user)]]
+
@@ -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);