MessageView: item is truncated in dialog and doesn't allow switching to details view

[lochannimje]

Describe the bug

In Safari browser, information/error message is not showing fully, In other browsers, able to see the complete message. The issue is there in web component itself. Kindly do help us here!

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

It should show the complete message, or the message should go in next line with scrollbar provided.

Screenshots or Videos

UI5 Web Components for React Version

1.16.3

UI5 Web Components Version

1.14.0

Browser

Safari

Operating System

ios

Additional Context

No response

Relevant log output

No response

Organization

SAP Labs Ltd, Bengaluru

Declaration

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

[Lukas742]

Hi @lochannimje

Please follow the guidelines for opening issues. "[Component Name]: [Bug Description]" doesn't give information of the affected component and neither of what the issue is about.

Also, please add a reproducible example, preferably by using this StackBlitz template.

[lochannimje]

Hi @Lukas742
please click the link: https://sap.github.io/ui5-webcomponents-react/?path=/story/user-feedback-messageview--message-view-in-dialog
and then click on Open Dialog

you can see the highlighted message, it is not showing fully, can see dots there.
Expected behaviour: It can show the message fully.

[Lukas742]

This is not related to the MessageView but the Dialog as it has a width of 400px defined in our example. The linked PR will adjust this.
So, in your application you can adjust the behavior of the Dialog to your use-case.

[lochannimje]

Hi @Lukas742,
The above issue comes in Safari browser, for other browser it is working as expected. Please help me over here!!

[Lukas742]

Hi @lochannimje

maybe Safari makes the text a bit bolder, or calculates the dimension of the font somehow differently, but the root cause of this is still the same (at least in our Storybook).
We're setting a width (only in our documentation, not in the component itself) of 400px and since the text is longer than that, it gets truncated.
In your application, it's up to you to decide what dimensions you want to use for the Dialog.

2024-07-01_14-13-20.mp4

If there's a different issue with the component, please add a reproducible example.

[pppwr7]

Hi Lukas742,
I see that the Title control is used to display the text in the MessageView in https://github.com/SAP/ui5-webcomponents-react/pull/5993/files. Can't we set the 'wrappingType' property to 'Normal' in the Title control? This could solve the issue for us.

[Lukas742]

Hi @pppwr7

unfortunately not, since this behavior is by design. You can see the same behavior in the SAPUI5 implementation (just change one of the titles to a very long one). Titles should be short and meaningful, for further information you can use the detail view.

In case you want to open a feature request for the wrapping behavior, please first open a ticket in central design and include the ID in the feature request.

[pppwr7]

Hi Lukas742,
In the SAPUI5 implementation, they have feature to enable navigation icon for long text, on click of which one can view the full text in details page.

[Lukas742]

Hi @pppwr7

I couldn't find this behavior in the specs, but as it makes sense in my opinion and to be consistent with the SAPUI5 implementation, we decided to include this as well. The linked PR will fix this.

[lochannimje]

Hi @Lukas742,
May I know the release version for the above changes.

[Lukas742]

🎉 This issue has been resolved in version v1.29.4 🎉

The release is available on v1.29.4

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.0.0-rc.0 🎉

The release is available on v2.0.0-rc.0

Your semantic-release bot 📦🚀