fixed bug with vertical alignment

Author: nmetulev

index.html

@@ -14,7 +14,6 @@
     <!-- <script src="./dist/bundle/mgt-loader.js"></script> -->
 
     <script type="module" src="dist/es6/index.js"></script>
-    <script type="module" src="dist/es6/components/sub-components/mgt-flyout/mgt-flyout.js"></script>
     <script type="module" src="./dist/es6/mock/mgt-mock-provider.js"></script>
   </head>
 
@@ -33,7 +32,10 @@
     <!-- <mgt-mock-provider></mgt-mock-provider> -->
 
     <mgt-login></mgt-login>
-    <mgt-person person-query="me" person-card="click"></mgt-person>
-    <mgt-tasks></mgt-tasks>
+    <mgt-person person-query="me" show-name show-email person-card="hover"></mgt-person>
+    <mgt-people-picker></mgt-people-picker>
+    <mgt-tasks data-source="todo"></mgt-tasks>
+    <mgt-agenda group-by-day></mgt-agenda>
+    <mgt-people></mgt-people>
   </body>
 </html>

src/components/sub-components/mgt-flyout/mgt-flyout.ts

@@ -109,6 +109,7 @@ export class MgtFlyout extends LitElement {
     if (flyout && anchor) {
       let left: number;
       let bottom: number;
+      let top: number;
 
       if (this.isOpen) {
         const flyoutRect = flyout.getBoundingClientRect();
@@ -152,13 +153,16 @@ export class MgtFlyout extends LitElement {
           }
         }
 
-        if (windowHeight < flyoutBottom) {
+        if (flyoutRect.height > windowHeight || (windowHeight < flyoutBottom && anchorRect.top < flyoutRect.height)) {
+          top = -flyoutTop + anchorRect.height;
+        } else if (windowHeight < flyoutBottom) {
           bottom = anchorRect.height;
         }
       }
 
       flyout.style.left = typeof left !== 'undefined' ? `${left}px` : '';
       flyout.style.bottom = typeof bottom !== 'undefined' ? `${bottom}px` : '';
+      flyout.style.top = typeof top !== 'undefined' ? `${top}px` : '';
     }
   }
 }