Make toasts fixed width.

[chauhanvats3]

Issue

I want to create a dynamic toast component and just realised the error messages could be any length long.
Thus, I need to have a fix width for the toast components.

For POC, i tried adding long data to toast's alert div. this resulted in a super long toast component that overflowed the page.

Thus, I tried to apply max-w-[35ch] to alert div and also tried to apply inline-block (as suggested by a StackOverflow answer) to span but the issue of text not wrapping still persisted.

Fix

However, i finally fixed it by adding text-wrap to the alert div.

Suggestions

But i believe this should be the default behaviour, cause too long toast element is bad UI. Please add it as default in future versions!
Also, as a default behaviour, i would like to have toast-end alerts to be end-aligned as well. this can be fixed by adding self-end to the alert div.

P.S. Here is a reproduction in TailwindCSS Play