[components]: replace resize handler with container queries

[nnaydenow]

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 (#5774) that reports flickering when the components are resized and it will increase the performance of the components.

• Resizer triggers on size 0 or display:none #5774

Reference

Following PR (#7665) can be used for reference how responsive styles of component should be migrated to content queries from resize handler

• chore: test content queries #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

[hristop]

Internal BLI was created: FIORITECHP1-28821

[dimovpetar]

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 .

[nnaydenow]

Blocked for the moment.