My toasts don't take the full width of the viewport on mobile screens. I noticed this reported in #1187, but I'm still experiencing it in 11.0.5. It looks like this only effects containers that are using the stacked prop.
The container initially has it's width set to 100vw in the breakpoint:
@media only screen and (max-width: 480px) {
.Toastify__toast-container {
width: 100vw;
left: env(safe-area-inset-left);
margin: 0
}
// ...
}
But then later on the container width is set to --toastify-toast-width with higher specificity when it the toasts are stacked. The variable at this scope is still 320px:
.Toastify__toast-container[data-stacked=true] {
width: var(--toastify-toast-width)
}
My quick fix was to set the variable to 100vw:
@media only screen and (max-width: 480px) {
.Toastify__toast-container {
--toastify-toast-width: 100vw;
}
}
My toasts don't take the full width of the viewport on mobile screens. I noticed this reported in #1187, but I'm still experiencing it in
11.0.5. It looks like this only effects containers that are using thestackedprop.The container initially has it's width set to
100vwin the breakpoint:But then later on the container width is set to
--toastify-toast-widthwith higher specificity when it the toasts are stacked. The variable at this scope is still320px:My quick fix was to set the variable to
100vw: