Masthead / Toolbar responsiveness issues

[jschuler]

Currently the masthead and toolbar set media queries that work on the whole window width to determine when to hide toolbar items behind an overflow button, etc
This is problematic when you have something like a drawer within the window that takes space away from the masthead/toolbar. The drawer should cause the masthead/toolbar to respond sooner.
You can reproduce the issue for example at
https://cloud.redhat.com/beta/application-services/streams/resources?
by opening up a quick start, then resizing the window (or just resizing the drawer).

A possible approach to tackle this might be to add a resize observer to listen to the parent container width and not the browser width to determine when to respond.

[redallen]

Maybe solvable with css-grid? https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox/#solutions

[jschuler]

@mattnolting

[mattnolting]

TLDR; @redallen minmax() in flex or grid would work if the request were to stack items when they run out of room (that's what the Gallery Layout does). Using grid auto-fill/fit properties would make all direct descendants the same width, with is not what we would want for a flexible layout such as the toolbar. Using display: flex + minmax() would tell the items to wrap when they reached a minimum width. Unfortunately, the minmax() property can't tell the items when to hide/show or change variable definitions, it only affects when items wrap.

Until we have container queries, we have to rely on our current breakpoint based css or an element (toolbar) resize observer. IMO, we should use element resize observers very sparingly, but if there were one place to use them in a page, it would be the toolbar.

[redallen]

@mattnolting What if a "PageDrawer" or similar were included in our current css-grid for pf-c-page? Would that work?

[mattnolting]

@redallen We already have pf-c-page__drawer. It's possible to set a flag on .pf-c-page__drawer > .pf-c-drawer.pf-m-expanded the shows/hides toolbar things, but the drawer could be open on a very wide screen and alter toolbar elements undesirably. Honestly, I think we should add a resize observer, then supplant when we have browser support for container queries.

[redallen]

I believe you, sounds good!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.