Modal: Text in message dialog is truncated

[rvaja-infor]

Describe the bug
The message dialog sometimes truncates the message text. In the attached screenshot you can observe that message text has been truncated. The text should read

The file does not exist in the system: 'file://C/Application/Administration/Data/ABC/ABC/ABC_PYMT_A_XYZAB_PARAMS.txt'

Steps to reproduce the behavior:

1. Go to 'https://ids-enterprise-4930-amgax7.stackblitz.io'
2. Click on 'Error Example' button
3. Text in message dialog is truncated, see screenshot

Expected behavior
The message in the dialog should not be truncated and clearly visible.

Version

• ids-enterprise: v4.93.0

Screenshots

Platform

• Infor Application/Team Name: Infor SunSystems
• Device: Windows Desktop
• OS Version: Windows 11
• Browser Name: Edge/Chrome
• Browser Version: latest 64bt

[tmcconechy]

Maybe we can do something with css word-wrap here.

[rvaja-infor]

Maybe we can do something with css word-wrap here.

I did look at this initially but it just don't look right. The only value that seem to have any effect was 'break-word', which produced the below.

Considering the string in single quotes is a path it does not feel right to word wrap it unless it looks meaningful. I did not propose to our analysts but can see what they think, but maybe rejected.

[tmcconechy]

@rvaja-infor maybe you can change the maxWidth here? https://github.com/infor-design/enterprise/blob/main/src/components/message/message.js#L21

[rvaja-infor]

Thought did cross my mind. Also a scrollbar for this. What I am trying to do here is effect other message dialogs and was looking for a more generic solution.

I may ask about the scrollbar as these paths can be any size which means I would need to find a sensible max-width, but that is not always going to be reasonable for some cases so the scrollbar may be the way forward.

[tmcconechy]

I'll talk to our team as well for ideas

[rvaja-infor]

@tmcconechy , had a closer look and see the issue.
The message div has a max-width of 369px. If this is removed then the message dialog expands to the content. Any reason for this max-width?

[tmcconechy]

@rvaja-infor this max width was an attempt to get a reasonable sized message (what the designs originally showed). Maybe we can look at a way to unset max width.

[yohannahbautista]

@rvaja-infor @tmcconechy
Hello, would setting maxWidth to 'fit-content' be a possible solution? https://stackblitz.com/edit/ids-enterprise-4930-vdasqa?file=index.html
It would avoid needing to specify a value for width.

[tmcconechy]

Looks like a good solution to me... @yohannahbautista what do you think @rvaja-infor ?

[rvaja-infor]

@tmcconechy , seems okay to me. Just so I have got the right end of the stick here, basically a new option is being added into the settings for message dialogs to specify max-width, is that correct?

[tmcconechy]

@rvaja-infor that option already works i believe cc @yohannahbautista ?

[rvaja-infor]

I just seen the option in the Enterprise controls we are currently on. Just not been exposed on our GWT wrapper, so not hard to sort out.

The documentation at https://design.infor.com/components/components/message/enterprise/, is not very clear how this setting can be used.

settings.maxWidth | string=null | Pass a specific string or defaults to null

We will however give this a try.

[tmcconechy]

@yohannahbautista can you update the docs? Mention you can use fit-conent (or any valid css width)