bug(Menu): Menu overlay panel position error when set value to viewportMargin

[HengNN]

Reproduction

Steps to reproduce:

1. In the menu trigger source code, add viewport margin to overlay position strategy.

private _getOverlayConfig(): OverlayConfig {
    return new OverlayConfig({
      positionStrategy: this._overlay.position()
          .flexibleConnectedTo(this._element)
          .withLockedPosition()
          .withGrowAfterOpen()
          .withViewportMargin(10) // add view port margin to avoid form covering scroll bar
          .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'),
      backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
      panelClass: this.menu.overlayPanelClass,
      scrollStrategy: this._scrollStrategy(),
      direction: this._dir
    });

2. Set menu position: xPosition="before", yPosition="below".
3. Click the menu trigger button, the menu overlay panel is not right-aligned.

no margin

has margin 10

Expected Behavior

What behavior were you expecting to see?

The menu overlay panel should right align with the trigger button.

Actual Behavior

What behavior did you actually see?

The menu overlay panel's right position is wrong.

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[HengNN]

The current code in _calculateBoundingBoxRect function

if (isBoundedByLeftViewportEdge) {
  right = viewport.width - origin.x + this._viewportMargin;
  width = origin.x - this._viewportMargin;
}

It might be changed to

if (isBoundedByLeftViewportEdge) {
  right = viewport.width - origin.x + this._viewportMargin * 2;
  width = origin.x - this._viewportMargin;
}

[mackelito]

Any updates here?