ELEMENTS-1731: Fix display of long username under activity section

nuxeo · Apr 10, 2024 · 9934306 · 9934306
1 parent f9b15a1
commit 9934306
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git 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;
+          }
         </style>
 
         <nuxeo-resource id="getUserProfile" enrichers="userprofile" enrichers-entity="user"></nuxeo-resource>
 
         <div id="container" aria-hidden="true">
-          <span id="character" hidden$="[[!_isInTheAlphabet]]">{{_output}}</span>
+          <span id="character" hidden$="[[!_isInTheAlphabet]]" class="user-initial">{{_output}}</span>
           <iron-icon hidden$="[[_isInTheAlphabet]]" icon="nuxeo:user"></iron-icon>
         </div>
       `;

diff --git 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;
           }
         </style>
         <nuxeo-tag>
@@ -79,7 +89,12 @@ import './nuxeo-tooltip.js';
             </nuxeo-user-avatar>
             <dom-if if="[[_hasLink(disabled, user)]]">
               <template>
-                <a href$="[[_href(user)]]" class="user-tag" on-click="_preventPropagation">[[_name(user)]]</a>
+                <a href$="[[_href(user)]]" class$="{{_getUserTagClass(user)}}" on-click="_preventPropagation"
+                  >[[_name(user)]]</a
+                >
+                <nuxeo-tooltip position="top" offset="0" animation-delay="0">
+                  [[_name(user)]]
+                </nuxeo-tooltip>
               </template>
             </dom-if>
             <dom-if if="[[!_hasLink(disabled, 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);