SideNav should overlay Content in UIShell

[theetrain]

When observing the UIShell on a small-width display, then expanding a collapsed SideNav, the SideNav squeezes the Content container. The SideNav should overlay the Content container without impacting the Content's layout.

To reproduce the issue:

1. Go to the React UIShell in Storybook
2. Make browser width 400px
3. Open SideNav
4. Observe SideNav overlays Content
5. Go to the Svelte UIShell demo and repeat steps 2-4
6. Observe SideNav squeezes Content

Here's the issue in screenshots:

React:

Svelte:

This is a possible duplicate of #516

Thanks for maintaining!

[blame2020]

"Content" is working by removing "bx--content" from "main".
The working https://v10.carbondesignsystem.com/ doesn't seem to have "bx--content".

The following rule prevented hiding.

.bx--side-nav.bx--side-nav--expanded ~ .bx--content {
    margin-left: 16rem;
}

But I don't know if this is the correct solution.

[brunnerh]

Actually, this possibly should be OS dependent; the paradigm on Android is overlaying the content while on iOS it would be pushing it. Certain native app frameworks already switch accordingly.

(The push should not impact the width of the content, just push some of it off screen, though.)

[theetrain]

The overlay versus push experience on Android and iOS is an interesting detail. However, when I tested the Carbon React UIShell on an iOS device, it didn't seem to implement a push effect:

I assume the flagship library tries to be consistent with OS-independent viewport-based behaviours.

[brunnerh]

If I had to choose just one behavior, I would also go with overlay. User agent/system detection code also can be messy.