[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
• Wizard
• ShellBar
• Page
• MediaGallery
• TabContainer
• DynamicSideContent
• IllustratedMessage
• Toolbar
• ProductSwitch
• FlexibleColumnLayout

Note: Some components might be missed so fill the list if some component is missing