Bug Description

Hi there, I have found incorrect settings for width and max-width settings for ValueStateMessage header in ResponsivePopover (in ValueStateMessage.css):

[ui5-responsive-popover] .ui5-valuestatemessage-header, [ui5-popover] .ui5-valuestatemessage-header { min-height: var(--_ui5_value_state_message_popover_header_min_height); min-width: var(--_ui5_value_state_message_popover_header_min_width); max-width: var(--_ui5_value_state_message_popover_header_max_width); width: var(--_ui5_value_state_message_popover_header_width); }

Here max-width is assumed to be 22rem (352px) while there are larger phones. This leads to cut width of the Value state message:

Also, the width in my opinion should take 100%, while it is set to "auto" now.
The changes come from this PR: #12017

Affected Component

No response

Expected Behaviour

The max-width should be 100%, the width too.

Isolated Example

https://ui5.github.io/webcomponents/packages/main/test/pages/DateTimePicker.html

Steps to Reproduce

1. Open the sample in mobile emulation, and select Samsung S20 Ultra (412x915px)
2. Find a DateTimePicker instance with value state message
3. Open it and observe valuestate message appearance

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

main

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Organization

No response

Declaration

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