search

infor-design / enterprise

Enterprise-grade component library for the Infor Design System
https://design.infor.com
Apache License 2.0
130 stars 80 forks source link

Modal: Text in message dialog is truncated #8839

Open rvaja-infor opened 2 weeks ago

rvaja-infor commented 2 weeks ago

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

Screenshots image

Platform

tmcconechy commented 1 week ago

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

rvaja-infor commented 1 week ago

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. image

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 commented 1 week ago

@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 commented 1 week ago

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 commented 1 week ago

I'll talk to our team as well for ideas

rvaja-infor commented 1 week ago

@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 commented 1 week ago

@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.