fix: direct reports list formatting (#2930)

microsoftgraph · Jan 4, 2024 · f2547d1 · f2547d1
1 parent 981e6f9
commit f2547d1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss b/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss
@@ -63,8 +63,7 @@ $organization-direct-report-person-avatar-size: var(--organization-direct-report
       padding: 12px;
       display: flex;
       align-items: center;
-      margin-left: 20px;
-      margin-right: 20px;
+      margin-inline: 20px;
 
       &.org-member--target {
         background-color: $organization-active-org-member-target-background-color;
@@ -138,10 +137,18 @@ $organization-direct-report-person-avatar-size: var(--organization-direct-report
       padding: 12px 20px;
 
       .direct-report {
-        cursor: pointer;
-        width: 38px;
         margin-right: 4px;
-        display: inline;
+      }
+    }
+
+    .direct-report-list {
+      border: 1px solid $organization-coworker-border-color;
+      margin-inline: 20px;
+
+      .org-member--direct-report {
+        border: none;
+        cursor: pointer;
+        margin-inline: 0;
 
         .direct-report__person-image {
           --person-avatar-size: #{$organization-direct-report-person-avatar-size};

diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
@@ -252,7 +252,7 @@ export class MgtOrganization extends BasePersonCardSection {
 
     return html`
       <div class="org-member__separator"></div>
-      <div>
+      <div class="direct-report-list">
         ${directReports.map(
           person => mgtHtml`
             <div
@@ -275,7 +275,6 @@ export class MgtOrganization extends BasePersonCardSection {
                 ${getSvg(SvgIcon.ExpandRight)}
               </div>
             </div>
-            <div class="org-member__separator"></div>
           `
         )}
       </div>