Toast: message is too long and is not formatted correctly

[DancuVladTrimble]

Prerequisites

• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the issue

The message is too long for the red background and is not formatted correctly.

Reduced test cases

No response

What operating system(s) are you seeing the problem on?

No response

What browser(s) are you seeing the problem on?

No response

What is the issue regarding ?

@trimble-oss/modus-web-components

What version of npm package are you using ?

No response

Priority

High

What product/project are you using Modus Components for ?

TSL(Trade Service Live)

What is your team/division name ?

Con-Artist(MEP Construction)

Are you willing to contribute ?

None

Are you using Modus Web Components in production ?

No response

[github-actions]

Hello @DancuVladTrimble! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.

[coliff]

@mitch-trimble We can change a few CSS rules so it displays like this - what do you think?

remove from .text:

white-space: nowrap;
overflow: hidden;

add to .modus-toast:

min-height: 2.6875rem;

(and remove height: 2.6875rem;)

[DancuVladTrimble]

Hi Christian, Let me check with my PM and I will get back with an answer. Thanks!

…

On Thu, Feb 20, 2025 at 9:36 AM Christian Oliff ***@***.***> wrote: @mitch-trimble <https://github.com/mitch-trimble> We can change a few CSS rules so it displays like this - what do you think? image.png (view on web) <https://github.com/user-attachments/assets/0b69b9bd-42e4-454e-8e27-80dc2f9509a7> *remove from .text:* white-space: nowrap; overflow: hidden; *add to .modus-toast:* min-height: 2.6875rem; (and remove height: 2.6875rem;) — Reply to this email directly, view it on GitHub <#3137 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BCUVW3L42X6DGIUN56BMZLD2QWAWVAVCNFSM6AAAAABVSVAWGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZQGY4DKMJWHE> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: coliff]*coliff* left a comment (trimble-oss/modus-web-components#3137) <#3137 (comment)> @mitch-trimble <https://github.com/mitch-trimble> We can change a few CSS rules so it displays like this - what do you think? image.png (view on web) <https://github.com/user-attachments/assets/0b69b9bd-42e4-454e-8e27-80dc2f9509a7> *remove from .text:* white-space: nowrap; overflow: hidden; *add to .modus-toast:* min-height: 2.6875rem; (and remove height: 2.6875rem;) — Reply to this email directly, view it on GitHub <#3137 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BCUVW3L42X6DGIUN56BMZLD2QWAWVAVCNFSM6AAAAABVSVAWGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZQGY4DKMJWHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[DancuVladTrimble]

Hello, The PM approved your approach, so you can proceed with the implementation. Thanks!

…

On Thu, Feb 20, 2025 at 9:38 AM Vlad Dancu ***@***.***> wrote: Hi Christian, Let me check with my PM and I will get back with an answer. Thanks! On Thu, Feb 20, 2025 at 9:36 AM Christian Oliff ***@***.***> wrote: > @mitch-trimble <https://github.com/mitch-trimble> We can change a few > CSS rules so it displays like this - what do you think? > > image.png (view on web) > <https://github.com/user-attachments/assets/0b69b9bd-42e4-454e-8e27-80dc2f9509a7> > > *remove from .text:* > white-space: nowrap; > overflow: hidden; > > *add to .modus-toast:* > min-height: 2.6875rem; > (and remove height: 2.6875rem;) > > — > Reply to this email directly, view it on GitHub > <#3137 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/BCUVW3L42X6DGIUN56BMZLD2QWAWVAVCNFSM6AAAAABVSVAWGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZQGY4DKMJWHE> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> > [image: coliff]*coliff* left a comment > (trimble-oss/modus-web-components#3137) > <#3137 (comment)> > > @mitch-trimble <https://github.com/mitch-trimble> We can change a few > CSS rules so it displays like this - what do you think? > > image.png (view on web) > <https://github.com/user-attachments/assets/0b69b9bd-42e4-454e-8e27-80dc2f9509a7> > > *remove from .text:* > white-space: nowrap; > overflow: hidden; > > *add to .modus-toast:* > min-height: 2.6875rem; > (and remove height: 2.6875rem;) > > — > Reply to this email directly, view it on GitHub > <#3137 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/BCUVW3L42X6DGIUN56BMZLD2QWAWVAVCNFSM6AAAAABVSVAWGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZQGY4DKMJWHE> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >