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

Author: Mnickii

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>`

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);