Problem/Motivation

Using D11's Navigation module, one thing I've ran into is how the side menu impacts a project's media queries. Components don't break when they should for the design to work when the lefthand side of the page takes up a chunk of the viewport creating a broken looking experience when logged in. I wonder if the approach should be that we isolate our styles/queries/custom properties to a site wrapper and let Drupal add whatever additional things it might need to. Drupal's .layout-container class already does that and we can build onto that with container queries. By taking this approach, the site's styles will act more like if they were isolated in an iframe giving people the flexibility to put whatever they need from an admin UI perspective. CSS custom properties would also be scoped to that container instead of :root{}.

This doesn't solve the questions around more narrowly scoped components/container queries or things like type scales. It simply shifts the context of the media queries from the window, down to the custom theme of the website itself.

Comments

jnettik created an issue.