Toast header overflows the toast element

[cjcenizal]

v1.1.0

[cchaos]

@cjcenizal You'll want to add the utility class of .eui-textBreakAll to the title text to make sure it breaks in the middle of words.

Also, in this particular case, the title seems a bit long. It feels more like the first sentence is the title and the rest is the description. It'll help user's find the actual cause of the warning quicker. (2 cents)

[cjcenizal]

Also, in this particular case, the title seems a bit long. It feels more like the first sentence is the title and the rest is the description. It'll help user's find the actual cause of the warning quicker. (2 cents)

I agree! This is what I ended up doing.

You'll want to add the utility class of .eui-textBreakAll to the title text to make sure it breaks in the middle of words.

Do you think we can add a prop to the toast, e.g. textBreak="all", to apply this class for us? I think the convenience would make sense for narrow components like toasts, where we can expect this to occur more often than for wider components. Manually-applied classes are tougher debug and tougher to maintain, so I think it would be nice for the DX to reserve them as a last resort.