>>! In T303612#11620937, @bmartinezcalvo wrote:
> When the Toast text is long, the action should stack so both Toast content and button text can be read.
>
> | {F72134841} | {F72134838} |
> | Current behavior | Expected behavior |
This is particularly important on mobile. However, it is possible to reproduce on desktop when the action button text is long:
{F72625682}
We also need to avoid this, where the icon and text are no longer paired together:
{F72790232}
One difficulty is that the most effectively solution would be to change the markup of the Message component, used within Toast, to wrap the icon and text in a new element to separate them from the action button. However, changing the Message markup would be a breaking change to the CSS-only version, which is used in several places. We should not do so unless absolutely necessary as it would require a major version update. IMO, we can find a way to improve the Toast UX enough that it's legible and looks decent without a breaking change.
### Acceptance criteria
[] Toast message text and action button text are both legible on all viewport sizes even when the text of either/both is long