Collapsed side nav causes main content to have extra left margin

[JacobReynolds]

Collapsed side nav causes main content to have extra left margin

What package(s) are you using?

• carbon-components
• carbon-components-react
• carbon-components-svelte

Detailed description

When following the UIShell examples, a collapsed side navigation bar causes extra margin to be present on the main content of the page. The responsible class seems to be

carbon/packages/components/src/components/ui-shell/_content.scss

Line 28 in a987ca4

margin-left: mini-units(6);

. I will use Svelte in my examples, but this appears to affect all packages.

Steps to reproduce the issue

1. Open the following example https://carbon-svelte.vercel.app/framed/UIShell/PersistedHamburgerMenu?theme=g100
2. Notice there is an extra 3rem of margin-left on the main content causing it to be misaligned on the page
3. Open a developer panel and delete the <nav> element (notice that the nav is already collapsed, so this shouldn't affect anything)
4. Notice the main content has now had the margin removed when the side nav is not present and is properly centered.

[emyarod]

this may be a carbon-components-svelte specific issue, since from what I understand, the side nav should not be collapsed at wide viewport sizes. the margin exists so that there is space between the expanded side nav and the main content

[joshblack]

Hi there! Going to close this one out due to inactivity.