overflow in toast

[andrekat]

Hey!

It's me again - putting an "unbreakable" word into a toast causes following result:

Right now I am using following workaround. Unfortunately setting the "width" property to "auto" does not help .. is there another approach without manipulating the CSS containers of the toast?

<Toaster toastOptions={{
        style: {
            wordBreak: 'break-all'
        }
    }} />

[audn]

The toast has a max-width of 350px, so setting the width to auto wouldn't help in this case.

Your current workaround is valid though, so I wouldn't stress it too much 😄

[epleaner]

Is there any way around the toast max-width? Seems weird to me that that is not customizable. I am rendering some JSX in the toast that is larger than 350px.

[timolins]

Yep, you can change the width of the toast by overwriting max-width via toast styles.

// For all toasts
<Toaster
  toastOptions={{
    style: {
      maxWidth: 500
    }
  }}
/>

// Per toasts
toast.success("Long toast ...", {
  style: {
    maxWidth: 500
  }
})

[thomaslc66]

This would be a good thing to add to the documentation as it was really helpfull

[slhck]

Made a PR to update the docs, as I was also searching for this for some time.