Stacked Toast is not 100vw on mobile

[xaviervalarino]

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;
  }
}