fix(cdk/overlay): fix wrong overflow calculation (#17791)

* fix(cdk/overlay): fix wrong overflow calculation

overflowBottom is currently calculated with viewport.bottom (which could be any number from the height of the viewport to as large as your page is)
calculating the overflow should just be difference between "overlay.height added to the current coordinate on the overlay container" and the height of the viewport, not the height of the entire page.

* fix(popover-edit): fix failing test
Tested component should always fit within the viewport.
Pane dimensions should be approximately compared.

* avoid flaky errors due to narrow viewport width

Co-authored-by: Gobius Dolhain <Goobles@users.noreply.github.com>
Co-authored-by: Andrew Seguin <andrewjs@google.com>

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -611,8 +611,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
     // Determine how much the overlay goes outside the viewport on each
     // side, which we'll use to decide which direction to push it.
-    const overflowRight = Math.max(start.x + overlay.width - viewport.right, 0);
-    const overflowBottom = Math.max(start.y + overlay.height - viewport.bottom, 0);
+    const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);
+    const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);
     const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);
     const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);
 

src/material-experimental/popover-edit/popover-edit.spec.ts

@@ -182,7 +182,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
 
 @Component({
   template: `
-  <div #table style="margin: 16px">
+  <div #table style="margin: 16px; max-width: 90vw; max-height: 90vh;">
     <mat-table editable [dataSource]="dataSource">
       <ng-container matColumnDef="before">
         <mat-cell *matCellDef="let element">
@@ -219,7 +219,12 @@ class ElementDataSource extends DataSource<PeriodicElement> {
       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </mat-table>
   </div>
-  `
+  `,
+  styles: [`
+    mat-table {
+      margin: 16px;
+    }
+  `]
 })
 class MatFlexTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];
@@ -265,7 +270,12 @@ class MatFlexTableInCell extends BaseTestComponent {
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   <div>
-  `
+  `,
+  styles: [`
+    table {
+      margin: 16px;
+    }
+  `]
 })
 class MatTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];