fix(overlay): unnecessarily pushing overlay if it is exactly as wide as the viewport

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

@@ -1261,6 +1261,9 @@ describe('FlexibleConnectedPositionStrategy', () => {
         ]);
 
         attachOverlay({
+          // Set a large max-width to override the one that comes from the
+          // overlay structural styles. Otherwise the `width` will stop at the viewport width.
+          maxWidth: '200vw',
           width: viewport.getViewportRect().width + 100,
           positionStrategy
         });
@@ -1292,6 +1295,9 @@ describe('FlexibleConnectedPositionStrategy', () => {
         ]);
 
         attachOverlay({
+          // Set a large max-width to override the one that comes from the
+          // overlay structural styles. Otherwise the `width` will stop at the viewport width.
+          maxWidth: '200vw',
           width: viewport.getViewportRect().width + 100,
           positionStrategy
         });
@@ -1869,6 +1875,58 @@ describe('FlexibleConnectedPositionStrategy', () => {
       document.body.removeChild(veryLargeElement);
     });
 
+    it('should not push the overlay if it is exactly as wide as the viewport', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.top = '100px';
+      originElement.style.right = '0';
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPush(true)
+        .withPositions([{
+          originX: 'center',
+          originY: 'bottom',
+          overlayX: 'center',
+          overlayY: 'top',
+        }]);
+
+      attachOverlay({
+        width: viewport.getViewportRect().width,
+        positionStrategy
+      });
+
+      const originRect = originElement.getBoundingClientRect();
+      const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+      expect(Math.floor(overlayRect.right)).toBe(Math.floor(originRect.right));
+    });
+
+    it('should not push the overlay if it is exactly as tall as the viewport', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.left = '100px';
+      originElement.style.bottom = '0';
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPush(true)
+        .withPositions([{
+          originX: 'start',
+          originY: 'bottom',
+          overlayX: 'start',
+          overlayY: 'bottom',
+        }]);
+
+      attachOverlay({
+        width: viewport.getViewportRect().height,
+        positionStrategy
+      });
+
+      const originRect = originElement.getBoundingClientRect();
+      const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+      expect(Math.floor(overlayRect.bottom)).toBe(Math.floor(originRect.bottom));
+    });
+
   });
 
   describe('onPositionChange with scrollable view properties', () => {

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

@@ -630,13 +630,13 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // If the overlay fits completely within the bounds of the viewport, push it from whichever
     // direction is goes off-screen. Otherwise, push the top-left corner such that its in the
     // viewport and allow for the trailing end of the overlay to go out of bounds.
-    if (overlay.width < viewport.width) {
+    if (overlay.width <= viewport.width) {
       pushX = overflowLeft || -overflowRight;
     } else {
       pushX = start.x < this._viewportMargin ? (viewport.left - scrollPosition.left) - start.x : 0;
     }
 
-    if (overlay.height < viewport.height) {
+    if (overlay.height <= viewport.height) {
       pushY = overflowTop || -overflowBottom;
     } else {
       pushY = start.y < this._viewportMargin ? (viewport.top - scrollPosition.top) - start.y : 0;