[ui5-input]: valueStateMessage style issues when no enough space

[Xidai]

Bug Description

As showed in the screenshot above, when there's not enough space for the error message, the style will be a mess.

Affected Component

No response

Expected Behaviour

No response

Isolated Example

https://stackblitz.com/edit/github-fvasrpsw?file=main.js,index.html

Steps to Reproduce

to reproduce in the standalone example, please adjust the height of the viewport to make the space below the input not enough to show all the message, and then refresh the page, then the issue can be reproduced.

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.8.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[nnaydenow]

Hello colleagues,

The issue is reproducible with plain popover. The value state message text is placed inside the header slot and it doesn't have scroll / truncation mechanism. https://stackblitz.com/edit/github-fvasrpsw-jdeld7og?file=main.js,index.html

This applies to all input components with value state. Please have that in mind when dispatching.

Regards,
Nayden

[hinzzx]

Hi team @SAP/ui5-webcomponents-topic-rd ,

As Nayden found out, this issue is reproducible with plain ui5-popover, please refer to the screenshot below.

As we can see the text in the popover is overflowing, and is being hidden due to overflow: hidden property of the ui5-popup-root CSS class.

The possible solutions that comes to my mind are:

1. An API that allows popover content (text) to be truncated or to be scrollable or some behaviour that handles this out of the box;
2. Set dynamically the placement property in the ui5-input popover template based on height and width (but that is more of a workaround for me, and action for another team);

Could you please take over, and assist the reporter ?

Best Regards,
Stoyan