[MDCMenu] Menus overlapping MARGIN_TO_EDGE are cropped

Bug report

MDCMenu that is positioned near the bottom edge of the screen will get cropped to a thin line rather than being repositioned above the anchor. getOriginCorner_ doesn't use MARGIN_TO_EDGE, but getMenuSurfaceMaxHeight_ does, causing the inconsistency and cropping.

Steps to reproduce

1. Create a menu that opens near the bottom of the screen where it would overlap MARGIN_TO_EDGE
2. Notice how the menu is cropped instead of being repositioned above the anchor

Actual behavior

The menu gets cropped because of its max-height property

Expected behavior

The menu should be aligned BOTTOM instead of TOP.

Screenshots

Your Environment:

Software	Version(s)
MDC Web	5.0.0-canary.a1a0deb3e.0
Browser	Chrome
Operating System	OSX

Additional context

This was surfaced while using the web-components version of the MDCMenu but the error appears to be here.

Possible solution

getOriginCorner_ should take into account the MARGIN_TO_EDGE here:

material-components-web/packages/mdc-menu-surface/foundation.ts

Line 325 in 8c11ea2

const availableBottom = isBottomAligned ? viewportDistance.bottom - this.anchorMargin_.bottom

and reposition the menu above.

Just saw this is a duplicate of #5373 However there hasn't been much update on that. Is this being worked on or does it need a PR?

[asyncliz]

Going to close since it's a duplicate of #5373. @harpojaeger was working on a fix in https://github.com/harpojaeger/material-components-web/tree/bug/menu-surface/scrollbar, you can follow the issue for updates!