Sidenav - fixed viewports: responsiveness

[leomayer]

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

I follow the example from the component-side and use the example for the fixed-viewport.

When I use the example for >=600px the height of the side-navbar is correct.
When I use the example for <600px the height of the side-navbar is correct.

Reproduction

StackBlitz https://vxisiwgo.stackblitz.io
Steps to reproduce:

1. Drag the divider to adjust the screen width
2. if < 600px the sidenavs height changes

Expected Behavior

Either display all the time the "aqua" background or never.

Actual Behavior

"aqua" background only when view-width <600px

Environment

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

[wagnermaciel]

Hi @leomayer the stackblitz you shared doesn't seem to be working. Could you try sending a new link?

[leomayer]

Does this link work?

https://stackblitz.com/edit/vxisiwgo?file=src%2Findex.html

[leomayer]

@wagnermaciel does the last link work?

[mrmokwa]

The toobar height is changing based on the size of the viewport, as expected from MD3.
If you want the sidenav content to adapt based on the size of the screen, make it flex and it should fix the problem.

[leomayer]

I don't talk about the mat-sidenav-content I talk about the height of mat-sidenav itself.

If I would follow your logic then the aqua background shouldn't appear OR shrink and grow with the width of the viewport. Which seems quite strange and doesn't act three way you've described.