fix: render person-card inside parent container (#3324)

microsoftgraph · Oct 2, 2024 · ae49332 · ae49332
1 parent a8f4099
commit ae49332
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -529,6 +529,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
 
     if (this._windowHeight < 250) {
       this._smallView = true;
+      this.fireCustomEvent('smallView', null, true);
     }
     const tabLocker = this.lockTabNavigation
       ? html`<div @keydown=${this.handleEndOfCard} aria-label=${this.strings.endOfCard} tabindex="0" id="end-of-container"></div>`

diff --git a/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts b/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
@@ -134,6 +134,13 @@ export class MgtFlyout extends MgtBaseTaskComponent {
         this.updateFlyout();
       });
     });
+
+    // handling when person-card is rendered in a smaller window
+    this.addEventListener('smallView', () => {
+      window.requestAnimationFrame(() => {
+        this.updateFlyout();
+      });
+    });
   }
 
   /**
@@ -372,7 +379,7 @@ export class MgtFlyout extends MgtBaseTaskComponent {
           }
         } else {
           if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
-            // it will render offscreen bellow, move it up a bit
+            // it will render offscreen below, move it up a bit
             top = windowRect.height - flyoutRect.height - this._edgePadding;
           } else {
             top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);