Its very important that the icon stays with the text.

So not like this:

@DSmit-WMF @AnneT what if we did something like this?

Design wise, I don't mind this layout, except when there is only the icon and content. It does take up more vertical space, but it is more mobile and long content friendly. It's not terrible with short content. It's not perfect. This is done by changing the display on __message to flow within the Toast, along with some other small margin changes to align the text and button. Some questions if we did this:

• Would this be the layout all the time?
• Should this be the layout only if the action is present? Is that too complicated or potentially changing unnecessarily?

What do you think?

I would recommend following the original design sine it's more aligned with other conversational components (e.g. Dialog, Popover) where the actions appear aligned on the right.

Thanks for weighing in Bárbara. A couple thoughts:

• I'm not sure the original design is working, and the right alignment feels odd to me.
• There is also this task reconsidering the position of the buttons in Dialog and Popover, which might be worth doing now.

I agree that right alignment can feel slightly off in some cases. To maintain consistency, I would align this with the rest of the conversational elements. So if we move the buttons to the left in T358359, I would agree on applying this approach to this Toast as well.

Okay, curious what @DSmit-WMF and @AnneT think, and if they agree with this, I'm happy to put some patches together, but might need some help with the Toast one if my above approach is not the right one or if we need to put more dependencies on there to adjust the layout based on props, etc.