Text Running to Edge on Toast

[josh-bagwell]

🐛 Bug Report

There is an issue with text currently on the Toast component that it will run to the edge of the container due to lack of padding. This occurs when the component does not have a close button. If there is a close button, it won't reach the edge of the container.

To Reproduce

Steps to reproduce the behavior:

Since the below does not have a close button, this text will run to the edge of the container.

<Toast mode="dialog" aria-label="notification">
  <Toast.Icon icon={exclamationTriangleIcon} color="greenApple400" />
    <Toast.Body>
      <Toast.Message>
        Could not convert file for previewing. Downloading file to your local machine instead.
      </Toast.Message>
    </Toast.Body>
</Toast>

Expected Behavior

The text should not reach the edge of the container when a close button is not present.

Actual Results

Depending on the text length, it will reach the edge of the container when a close button is not present.

Browser (if applicable)

If this was a visual bug, what browser did you spot it on?

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/ck-v9-toast-fmcpyv?file=/src/App.tsx