Adding min-width to my custom toast, breaks the positioning.

[andersonbruno]

Describe the feature / bug 📝:

When I add min-width to the toast, it leaves the screen.

Steps to reproduce the bug 🔁:

1. set position to bottom-right
2. set min-width to 500px
3. toast cuts off the screen, to solve this issue I have to add right:10 on the toastOptions. Is there another way to set min-width, without having it overflow?

it works fine without min-width, but I would like for the content to take more space.

[sekeidesign]

+1 to this, it's not just a min width problem, and it's not just on the bottom-right alignment.

The component doesn't seem to gracefully handle alignment when the width of the toast is anything but the original size. In this example the position="bottom-center" but because the toast has a width of 720px, it's pushed off to the side.

It seems that alignment, not matter where, is based on the left of the toast

[sebastiansas1]

I've solved the issue with the following steps:

1. Give a classname to your Toaster: <Toaster className="Toaster" />
2. Insert the following styles for that class:

.Toaster {
  --width: unset !important;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;

  &[data-x-position='center'] {
    justify-content: center;
  }

  &[data-x-position='left'] {
    justify-content: flex-start;
  }

  &[data-x-position='right'] {
    justify-content: flex-end;
  }
}

This is a very rudimentary solution, it only covers the scenarios in which you'd want your toast to appear on the bottom (left, center, right). I've also added padding on left and right sides so it doesn't collide with the border of the window.

Hope this helps!

[emilkowalski]

Fixed in #559, it will be availalbe in version 2.0 launching soon.