From 5a112522c55cbea3622a611aad319a384af2bf1e Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Wed, 2 Oct 2024 11:01:07 +0300
Subject: [PATCH] fix: render people-picker flyout inside window (#3326)

---
 .../sub-components/mgt-flyout/mgt-flyout.ts           | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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
index 19c47c3c6c..f2b40ed5ac 100644
--- 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
@@ -364,8 +364,15 @@ export class MgtFlyout extends MgtBaseTaskComponent {
             height = anchorRectTopToWindowTop;
           }
         } else {
-          top = anchorRect.bottom;
-          height = anchorRectBottomToWindowBottom;
+          if (anchorRectTopToWindowTop >= flyoutRect.height) {
+            // render above anchor
+            bottom = windowRect.height - anchorRect.top;
+            height = anchorRectTopToWindowTop;
+          } else {
+            // render below anchor
+            top = anchorRect.bottom;
+            height = anchorRectBottomToWindowBottom;
+          }
         }
       } else {
         if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {