Sidemenu width increases in large viewports when displaying icons with no text (collapsed view)

[mtpultz]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The sidemenu width would keep the width of its content, and not increase as the viewport width increases from small to large. Also, sidemenu content would not get overlapped by the sidemenu as the viewport increases in size.

UPDATE
A similar issue occurs as you move from a large to small viewport, see #4215 (comment) that was posted below.

What is the current behavior?

Sidemenu when content is in a md-nav-list of md-icon's starts to increase in width in larger viewports instead of maintaining the smaller viewport width associated to the md-icon. Also, content slowly slides under the sidement as the viewport size is increased

Example 1: Increasing Viewport from Small to Large

Example 2: Content Position Corrected After Click

Clicking any icon after the content is overlapped by the sidemenu due to the viewport width increasing corrects the issue the content being overlapped, but increased width remains. Content moves back into the proper position using a transition, but only on click.

What are the steps to reproduce?

1. Increase the rendered view width of plunker after the application loads by pulling the rendered section over top of the code section, and collapsing/closing the file system section.
2. You'll see the width of the sidemenu increases in size, and the content slowly transitions under the sidemenu.

https://plnkr.co/edit/dcWC0RyemDofqMQ9fNJf?p=preview

What is the use-case or motivation for changing an existing behavior?

Common XU feature of having a expanded or collapsed sidemenu based on mobility or user preference is an easy way to get more viewport real-estate while interacting with an application.

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.02
Angular Material: 2.0.0-beta.3
Windows 10
Chrome, FireFox, IE 11, Edge

[donroyco]

This is the result of #3046, but I'm not sure what the pros and cons of @andrewseguin were to do this. Setting no min-width could break the animation.

[mtpultz]

@donroyco associated to the above issues that's occurring there is a somewhat similar issue in reverse that wasn't noticed until I started adding more elements to the template, but as the page width decreases from large to small sidenav content not longer lines up on the border of a left-sided sidenav, see screenshots.

I've added a toolbar to the sidenav content in the plunker to illustrate the associated bug.

Steps to Reproduce

1. Collapse/close the file view on the left side of the plunker to gain some real estate
2. Pull the rendered view over top of the code view almost all the way so the rendered view is 90% of your screen. The larger the viewport the more drastic the change that occurs similar to the original bug. Easily viewed on any monitor that a resolution width of 1200 pixels
3. Make a change to the code view (add a space anywhere), and wait for the refresh of the rendered view. Hard to see in plunker if you just refresh the page since it resets the code and rendered view widths so has to be an update.
4. After the refresh start decreasing the width of the rendered view by increasing the width of the code view
5. You'll see the sidemenu pull away from the toolbar instead of being seamlessly positioned at its edge. It pulls away the same amount that the width grows in the originally posted bug.
6. Similar to the original issue this is corrected by the transition that occurs when you click anyone of the icons in the sidemenu

NOTE: If you start in a small viewport and don't refresh after moving into a larger viewport width, and then go back down to a smaller viewport this does not occur. You just see the originally posted bug where the sidenav width increases in large viewports. You have to have start on a large viewport onload, and decrease the viewport width to see this occur.

Local Application Screenshot

Plunker Screenshot