bug(sidenav): Auto-resizing is broken.
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
v16
### Description
Auto-resizing has been broken since Angular Material v17 due to the `container-width` styling.
`MatDrawerContainer#updateContentMargins()` checks the width of MatDrawer.
https://github.com/angular/components/blob/11f9228e1b4c18c86bb3de43d02fe40a39fcfff7/src/material/sidenav/drawer.ts#L897-L941
However, the MatDrawer's width is fixed due to `container-width` styling.
As a result, the content margins always end up being the same value.
I guess adding `width:auto` to the host style of `MatDrawer` when `autosize` is specified could restore the behavior.
For example:
`'[style.width]': '(!_container && _container.autosize) ? "auto" : null',` on
https://github.com/angular/components/blob/11f9228e1b4c18c86bb3de43d02fe40a39fcfff7/src/material/sidenav/drawer.ts#L157-L172
### Reproduction
Reproduced the Angular Material docs example:
- [v17](https://v17.material.angular.dev/components/sidenav/examples#sidenav-autosize)
- [v18](https://v18.material.angular.dev/components/sidenav/examples#sidenav-autosize)
- [v19](https://v19.material.angular.dev/components/sidenav/examples#sidenav-autosize)
- [v20](https://v20.material.angular.dev/components/sidenav/examples#sidenav-autosize)
It still works on v16:
- [v16](https://v16.material.angular.dev/components/sidenav/examples#sidenav-autosize)
### Expected Behavior
Auto-resizing should work.
### Actual Behavior
Auto-resizing is not work.
### Environment
- Angular: v17~v20
- CDK/Material: v17~v20
- Browser(s): Chrome 138.0.7204.169
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
Contributor guide
Research direction
Start in src/material/sidenav/drawer.ts, especially MatDrawerContainer#updateContentMargins() and the MatDrawer host styling around the referenced lines. Reproduce the sidenav-autosize example across the linked Angular Material versions and compare the drawer width used for content margins. Done means autosizing changes the content margins as the drawer width changes, as it does in v16.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100