Fix issue text overflow when user name is too long

Author: LanThuyNguyen

src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less

@@ -89,11 +89,16 @@
 
 
 .umb-user-card__name {
-    font-size: 15px;
-    font-weight: bold;
-    text-align: center;
-    margin-bottom: 2px;
-    word-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 2px;
+  word-wrap: break-word;
 }
 
 .umb-user-card__group {
@@ -107,3 +112,12 @@
     text-align: center;
     margin-top: auto;
 }
+
+.umb-user-name__last-login {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}

src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html

@@ -196,7 +196,7 @@
                             <umb-avatar size="l" color="secondary" name="{{user.name}}" img-src="{{user.avatars[2]}}" img-srcset="{{user.avatars[3]}} 2x, {{user.avatars[4]}} 3x">
                             </umb-avatar>
                         </div>
-                        <div class="umb-user-card__name">{{user.name}}</div>
+                        <div title="{{user.name}}" class="umb-user-card__name">{{user.name}}</div>
                     </a>
                     <div class="umb-user-card__group">
                         <span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
@@ -209,9 +209,10 @@
                             {{ user.formattedLastLogin }}
                         </div>
                         <div ng-if="!user.formattedLastLogin">
-                            <div>{{ user.name | umbWordLimit:1 }}
-                                <localize key="user_noLogin">has not logged in yet</localize>
-                            </div>
+                          <div class="umb-user-name__last-login" title="{{ user.name | umbWordLimit:1 }}">
+                            {{ user.name | umbWordLimit:1 }}
+                          </div>
+                          <localize key="user_noLogin">has not logged in yet</localize>
                         </div>
                     </div>
                 </div>