fix(ui): correct toasts being in the wrong position on smaller screens

src/components/Toast/index.tsx

@@ -16,7 +16,7 @@ const Toast: React.FC<ToastProps> = ({
   transitionState,
 }) => {
   return (
-    <div className="flex items-end justify-center px-2 py-2 pointer-events-none toast sm:items-start sm:justify-end">
+    <div className="flex items-end justify-center max-w-full px-2 py-2 pointer-events-none toast sm:items-start sm:justify-end">
       <Transition
         show={transitionState === 'entered'}
         enter="transition duration-300 transform-gpu"

src/components/ToastContainer/index.tsx

@@ -8,7 +8,7 @@ const ToastContainer: React.FC<ToastContainerProps> = ({
   return (
     <div
       id="toast-container"
-      className="fixed max-w-full max-h-full overflow-hidden top-4 right-4"
+      className="box-border fixed right-0 max-w-full max-h-full px-4 overflow-hidden top-4"
       style={{
         pointerEvents: hasToasts ? 'all' : 'none',
         zIndex: 10000,