IllustratedMessage calculates wrong height in shared container

[codingfabi]

Bug Description

When using the IllustratedMessage component in a container that is shared with another element, the IllustratedMessage renders its children outside the wrapping container. Also, the IllustratedMessage Component does not consider even when I specify a height directly on the component. However, when shrinking the window and triggering the resize observer, the new height of the IllustratedMessage gets calculated and the children are placed correctly inside the container.

Expected Behavior

I would expect the IllustratedMessage component to calculate its height such that its children are rendered inside the wrapping container and do not overflow. Furthermore, if a specify a fixed height, I would also expect the height to be applied to the entire component including its children.

Steps to Reproduce

1. Go to https://codesandbox.io/s/ui5-webcomponents-forked-0mgmpo?file=/index.html (If the retry button is rendered inside the red container, try to increase the window size. The button will then jump out of the container)
2. On the top, there is an example where the IllustratedMessage shares its div container with a bar of buttons. The retry button, rendered as a child of the component, overflows the container, even though the IllustratedMessage component has a height of 100%.
3. At the bottom, there is a similar example but with a fixed height to the IllsutratedMessage component. As you can see, setting a fixed height does not solve the problem.
4. Note that

Isolated Example

Sandbox Example

Context

• UI5 Web Components version: {1.8.0}
• Browser: {Chrome Version 109.0}
• Affected component: {IllustratedMessage}

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: {UI5-Webcomponents-for-react}

[niyap]

Hello @SAP/ui5-webcomponents-topic-p ,

Please check the detailed description of the issue provided by the reporter. It can be easily reproduced in the CodeSandbox: https://codesandbox.io/s/ui5-webcomponents-forked-0mgmpo?file=/index.html

Could you please look over?

Thank you in advance!

Kind Regards, Niya

[PetyaMarkovaBogdanova]

Dear colleagues, perhaps we should think about implementing vertical responsiveness API in ui5-illustrated-message. Let us discuss this further. Regards, Petya. (UI5 Developer)

[LRitsu]

Dear colleagues, Could you please provide a timeline / plan about when this one can be fixed? Since the related feature is part of strategy project and is under leadership's monitoring. Thanks much, Ritsu (WEF PM)

[dobrinyonkov]

Internal reference: BGSOFUIPIRIN-6171

[dobrinyonkov]

This feature request will be implemented in the upcoming sprints. Thank you for your support.

Kind Regards, Dobrin