person-card displayName overflow (#389)

* adding overflow to person-card name title

* adding tooltip to displayname

* fix for all browsers

Author: vogtn

src/components/mgt-person-card/mgt-person-card.scss

@@ -37,10 +37,29 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
     .details {
       margin-left: 14px;
       line-height: 1.15;
-
+      display: grid;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipse;
+      white-space: nowrap;
+      background-color: transparent;
+      width: 100%;
       .display-name {
         font-size: $person-card-display-name-font-size;
         color: $person-card-display-name-color;
+        &::after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          right: 0;
+          background: linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
+          background: -moz-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
+          background: -o-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
+          background: -ms-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
+          background: -webkit-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
+        }
       }
 
       .job-title {

src/components/mgt-person-card/mgt-person-card.ts

@@ -251,7 +251,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   protected renderPersonName(person?: IDynamicPerson): TemplateResult {
     person = person || this.personDetails;
     return html`
-      <div class="display-name">${person.displayName}</div>
+      <div class="display-name" title="${person.displayName}">${person.displayName}</div>
     `;
   }