Open andersonbruno opened 6 months ago
+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
I've solved the issue with the following steps:
<Toaster className="Toaster" />
.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!
Describe the feature / bug 📝:
When I add min-width to the toast, it leaves the screen.
Steps to reproduce the bug 🔁:
it works fine without min-width, but I would like for the content to take more space.