render flyout inside window

microsoftgraph · Oct 1, 2024 · dfd4172 · dfd4172
1 parent 16e9fa1
commit dfd4172
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
@@ -357,8 +357,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) {