The top and bottom positioned toasts have this style:
/*overrides*/
&.toast-top-center > div,
&.toast-bottom-center > div {
width: 300px;
margin-left: auto;
margin-right: auto;
}
The .toast-top-center or .toast-bottom-center classes cause the selectors to be more specific than the media queries, which means that the widths specified in the media queries will not apply if the toasts are configured to be positioned to top or bottom.
You can simply remove the width: 300px rule from here, I think there's no reason for it.