mgt-person: fix avatar scaling issue (#2071)

- added story to demonstrate - fixes: #2070
microsoftgraph · Mar 2, 2023 · 7a233db · 7a233db
1 parent ac448bf
commit 7a233db
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
@@ -267,6 +267,7 @@ mgt-person .person-root {
       border: $avatar-border;
       border-radius: $avatar-border-radius;
       position: relative;
+      box-sizing: border-box;
 
       img {
         position: absolute;

diff --git a/stories/components/person/person.properties.js b/stories/components/person/person.properties.js
@@ -298,6 +298,10 @@ export const moreExamples = () => html`
       --avatar-size: 60px;
       --avatar-border-radius: 10% 35%;
     }
+
+    .person-with-avatar-border {
+      --avatar-border: 2px solid black;
+    }
   </style>
 
   <div class="example">
@@ -341,6 +345,11 @@ export const moreExamples = () => html`
     <mgt-person person-query="me" view="twoLines"></mgt-person>
   </div>
 
+  <div class="example">
+    <div>Avatar with border (see css tab for style)</div>
+    <mgt-person class="person-with-avatar-border" person-query="me" avatar-size="large" view="oneline"></mgt-person>
+  </div>
+
   <div class="example">
     <div>Style initials (see css tab for style)</div>
     <mgt-person class="person-initials" person-query="alex@fineartschool.net" view="oneline"></mgt-person>