fix(cdk/overlay): fix overlay margin in isBoundedByLeftViewportEdge ('left-ward') mode (#28233)

Author: kryshac

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

@@ -2000,6 +2000,31 @@ describe('FlexibleConnectedPositionStrategy', () => {
       expect(Math.floor(overlayRect.top)).toBe(viewportMargin);
     });
 
+    it('should calculate the right offset correctly with a viewport margin', async () => {
+      const viewportMargin = 5;
+      const right = 20;
+
+      originElement.style.right = `${right}px`;
+      originElement.style.top = `200px`;
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPush(false)
+        .withViewportMargin(viewportMargin)
+        .withPositions([
+          {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+          },
+        ]);
+
+      attachOverlay({positionStrategy});
+
+      expect(overlayRef.hostElement.style.right).toBe(`${right}px`);
+    });
+
     it('should center flexible overlay with push on a scrolled page', () => {
       const veryLargeElement = document.createElement('div');
 

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

@@ -815,7 +815,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     let width: number, left: number, right: number;
 
     if (isBoundedByLeftViewportEdge) {
-      right = viewport.width - origin.x + this._viewportMargin;
+      right = viewport.width - origin.x + this._viewportMargin * 2;
       width = origin.x - this._viewportMargin;
     } else if (isBoundedByRightViewportEdge) {
       left = origin.x;