bug(mat-menu): Scrollbar appears for sub-menu at given positions

[csisy]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

To reproduce the problem, open the mat-menu documentation/examples.

Sometimes the sub-menu receives a scrollbar instead of positioning it in a way that it does not require any scrolling. It has to do something with the additional 8px padding and translating.

By changing the .mat-menu-panel height to fit-content the issues is solved, however it's not a bullet-proof solution.

Reproduction

Steps to reproduce:

1. Open the mat-menu documentation/examples.
2. "Restore Down" the browser so you can change its height easily
3. Open the submenu
4. Decrease the height of the browser in a way that the bottom of the window approaches the bottom of the sub-menu
5. In a given interval the sub-menu has a scrollbar

Expected Behavior

The sub-menu should be sized and positioned properly so it does not have a scrollbar.

Actual Behavior

In a given position/interval the sub-menu has a scrollbar.

Environment

Angular CLI: 14.2.1
Node: 14.17.5
Package Manager: npm 7.24.2
OS: win32 x64

[hilbertglm]

This is happening to me with the following versions:

    "@angular/animations": "^16.2.5",
    "@angular/cdk": "^16.2.4",
    "@angular/common": "^16.2.5",
    "@angular/compiler": "^16.2.5",
    "@angular/core": "^16.2.5",
    "@angular/forms": "^16.2.5",
    "@angular/material": "^16.2.4",
    "@angular/platform-browser": "^16.2.5",
    "@angular/platform-browser-dynamic": "^16.2.5",

The .mat-menu-panel override in CSS did not work for me. This worked in v13, and broken when I migrated to v16