Open
Description
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:
- Go to the React UIShell in Storybook
- Make browser width 400px
- Open SideNav
- Observe SideNav overlays Content
- Go to the Svelte UIShell demo and repeat steps 2-4
- Observe SideNav squeezes Content
Here's the issue in screenshots:
React:
Svelte:
This is a possible duplicate of #516
Thanks for maintaining!
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Participants
Activity
blame2020 commentedon Oct 7, 2022
"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.
But I don't know if this is the correct solution.
SideNav should overlay Content in UIShell
brunnerh commentedon Feb 24, 2023
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 commentedon Feb 24, 2023
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 commentedon Feb 24, 2023
If I had to choose just one behavior, I would also go with overlay. User agent/system detection code also can be messy.