fix: render people-picker flyout inside window (#3326)

microsoftgraph · Oct 2, 2024 · 5a11252 · 5a11252
1 parent ae49332
commit 5a11252
Showing 1 changed file with 9 additions and 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
@@ -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) {