[mgt-people] setting overflow to align with peoplelist verticaly (#208)

microsoftgraph · Jun 8, 2020 · d82f0d7 · d82f0d7
1 parent 26d898b
commit d82f0d7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/mgt/src/components/mgt-people/mgt-people.scss b/packages/mgt/src/components/mgt-people/mgt-people.scss
@@ -16,14 +16,21 @@ mgt-people .people-list {
   list-style-type: none;
   margin: $list-margin;
   padding: 0;
-  font-family: var(--default-font-family, "Segoe UI");
+  font-family: var(--default-font-family, 'Segoe UI');
   font-style: normal;
   font-weight: normal;
   display: flex;
+  align-items: center;
 }
 
 :host .people-person,
 mgt-people .people-person {
   margin: $avatar-margin;
   display: flex;
 }
+:host .overflow,
+mgt-people .overflow {
+  span {
+    vertical-align: middle;
+  }
+}
diff --git a/packages/mgt/src/components/mgt-people/mgt-people.ts b/packages/mgt/src/components/mgt-people/mgt-people.ts
@@ -140,7 +140,7 @@ export class MgtPeople extends MgtTemplatedComponent {
                     people: this.people
                   }) ||
                   html`
-                    <li>+${this.people.length - this.showMax}</li>
+                    <li class="overflow"><span>+${this.people.length - this.showMax}<span></li>
                   `
                 : null}
             </ul>