SAP
[components]: replace resize handler with container queries
Feature Request Description
Currently, every component that has responsive paddings or visualization based on a specific breakpoint apply class / attribute to the corresponding size and this class / attribute is used to style the component. Usually this class / attribute rely on the component width, where width is observed by resize handler in order to detect changes.
With current issue we want to start to use container queries. Container queries enable you to apply styles to an element based on the size of the element's container.
Motivation
There is issue (https://github.com/SAP/ui5-webcomponents/issues/5774) that reports flickering when the components are resized and it will increase the performance of the components.
- https://github.com/SAP/ui5-webcomponents/issues/5774
Reference
Following PR (https://github.com/SAP/ui5-webcomponents/pull/7665) can be used for reference how responsive styles of component should be migrated to content queries from resize handler
- https://github.com/SAP/ui5-webcomponents/pull/7665
Resources
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
To be addressed
- [ ] PopupCommons styles
- [x] Wizard
- [ ] ShellBar
- [x] Page
- [ ] MediaGallery
- [ ] TabContainer
- [ ] DynamicSideContent
- [ ] IllustratedMessage
- [ ] Toolbar
- [ ] ProductSwitch
- [ ] FlexibleColumnLayout
Note: Some components might be missed so fill the list if some component is missing
For Popover and Dialog (Popups), CSS container queries cannot be used. They determine their size based on their content (Child -> Parent). If we make popups containment contexts, their content would be sized based on the popup size (Parent ->Child). Therefore this would end in Child->Parent->Child->Parent->... resizing. Read more detailed explanation of why this is not possible here https://stackoverflow.com/a/73980194/9136171 .
ui5-dynamic-side-content done with https://github.com/UI5/webcomponents/pull/12054
