fix(popover): update positioning logic to render within body

projects/angular/src/utils/popover/providers/popover-position.service.ts

@@ -65,12 +65,12 @@ export class ClrPopoverPositionService {
      *
      *   Note, more than 3 viewport violations and there isn't anything we can do to help. Also when there are two
      *   violations, we can't help if the violations are TOP+BOTTOM || LEFT+RIGHT => There is no transformation we
-     *   can make to the postion that will help.
+     *   can make to the position that will help.
      *
      *   Some examples:
      *   There is only one error and Primary axis is VERTICAL
      *   - this.handleVerticalAxisOneViolation has a switch that will use the error sum to apply the correct
-     *   transform to the postion based on the reduction of visibilityViolations.
+     *   transform to the position based on the reduction of visibilityViolations.
      *
      *   There are two errors and Primary axis is HORIZONTAL
      *   - handleHorizontalAxisTwoViolations has a switch that uses the error sum to apply both transforms needed to
@@ -103,6 +103,16 @@ export class ClrPopoverPositionService {
       this.contentOffsets.yOffset += Math.abs(this.currentContentCoords.top);
     }
 
+    /**
+     * This detects the condition where the popover is flipped because it would violate the bottom of the viewport, but flipping it results in the
+     * popover rendering above the top of the body (y coordinate outside the body). In that event, it should be rendered within the body
+     * as much as possible, so this logic sets the top of popover to render touching the top of the body.
+     */
+
+    if (this.contentOffsets.yOffset + this.currentAnchorCoords.y < 0) {
+      this.contentOffsets.yOffset = 0 - this.currentContentCoords.top;
+    }
+
     return this.contentOffsets;
   }