From d2b499da9418b2c1f62fd968da0eaf83aa4dcd68 Mon Sep 17 00:00:00 2001
From: Gobius Dolhain <8776771+Goobles@users.noreply.github.com>
Date: Thu, 6 Aug 2020 19:16:56 +0200
Subject: [PATCH] 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>
---
 .../flexible-connected-position-strategy.ts      |  4 ++--
 .../popover-edit/popover-edit.spec.ts            | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
index 9f5bc0d21a33..95b74fc4385d 100644
--- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts
+++ b/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);
 
diff --git a/src/material-experimental/popover-edit/popover-edit.spec.ts b/src/material-experimental/popover-edit/popover-edit.spec.ts
index 1a5352965e31..6bcb301261d4 100644
--- a/src/material-experimental/popover-edit/popover-edit.spec.ts
+++ b/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'];