bug(divider): every mat-divider has top and bottom margin when there is a mat-menu (material 3)

[Mikastark]

trafficstars

Is this a regression?

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

The previous version in which this bug was not present was

17

Description

Hi, When using a m3 theme, if one put a mat-menu and having some mat-dividers across an app, you will notice an unwanted top and bottom margin on every mat-divider and not only those inside mat-menu

Reproduction

StackBlitz link: https://stackblitz.com/edit/m2igi7?file=src%2Fexample%2Fmenu-overview-example.html Steps to reproduce:

1. Add a mat-menu and a matMenuTriggerFor
2. Add two divs with text
3. Add mat-divider between the two div
4. Save and serve ; you will notice there is margin between texts and the divider
5. Remove mat-menu and a matMenuTriggerFor
6. Save and serve ; the margin between texts and the divider is gone

Expected Behavior

mat-divider shouldn't have margin outside of mat-menu

Actual Behavior

mat-dividers have a top and bottom margin due to this CSS rule :

.mat-divider {
    color: var(--mat-menu-divider-color);
    margin-bottom: var(--mat-menu-divider-bottom-spacing);
    margin-top: var(--mat-menu-divider-top-spacing);
}

I think this is a view encapsulation problem on mat-menu

Environment

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