Adding grid usage explanation to app layout when l-nav is in is-collapsed state.

[camillet16]

Describe the bug

Lacking info on Vanilla docs

To Reproduce

Steps to reproduce the behavior:

1. Go to 'Vanilla docs app layout'
2. Missing content

Expected behavior

Show how grids work when l-nav is in an is-collapsed state and when l-aside is a panel not a slide over.

Screenshots

• When l-aside is a panel not a slide over

---

• When l-nav is-collapsed - does the grid stretch across the screen or does it float left?

• OS: MacOS

• Browser: Chrome

• Version: Latest

Add any other context about the problem here. Vanilla working group help :)

[danielmutis]

From WG:

The mafia will explore what the behaviour should be and benchmark existing implementations. The implementation is intended to have a max width which will stay left aligned when the side nav is collapsed and the window is wider than this maximum.

[bartaz]

From code point of view we could explore https://caniuse.com/css-container-queries This seems to be supported in modern browsers and would allow to make grid responsive based on panel size rather than screen size

[danielmutis]

WG:

• Lyubo: the content should expand until it's max width and from that point on it could be centred.
• When there is a side panel, the side panel should have a fixed width and continue to be attached to the right edge of the page.
• Wide screens are typically not used like this, so with these two approaches we cover the use case without necessarily designing for this situation.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14982.

This message was autogenerated

[bartaz]

Triage: we need to review/update current docs and examples. This is relevant to current codebase.