Update the toast implementation such that toasts are perfectly centered

[salieflewis]

I've dug into this issue for far longer than I'd like. Currently the positioning of our Toaster component is defined in the root layout to be bottom-center.

The issue is that although the toasts sometimes appear in that position, or generally appear in that position, it is inconsistent, particuarly when firing after username registration.

This has something to do with the default styles that are applied either via sonner or react-hot-toast.

The root of the issue becomes apparent when you apply the w-full class to the component. You can see that a toast rendered at full width is actually centered. Meaning that the toast we see now is centered in some capacity, but not relative to the true width of the rendered component, rather to the entirety of its available width.

The thing I have yet to try is reaching directly for the react-hot-toast library in the hopes that this default styling was introduced via sonner and doesn't exist there.

Related: emilkowalski/sonner#333