fix(SW-993): toast is now full width on mobile

updated sonner to latest version

increased default duration of toast to 5 sec

components/TempDesignSystem/Toasts/index.tsx

@@ -16,7 +16,7 @@ import { toastVariants } from "./variants"
 import styles from "./toasts.module.css"
 
 export function ToastHandler() {
-  return <Toaster position="bottom-right" />
+  return <Toaster position="bottom-right" duration={5000} />
 }
 
 function getIcon(variant: ToastsProps["variant"]) {

components/TempDesignSystem/Toasts/toasts.module.css

@@ -6,7 +6,12 @@
   background: var(--Base-Surface-Primary-light-Normal);
   box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
   align-items: center;
-  width: var(--width);
+}
+
+@media screen and (min-width: 768px) {
+  .toast {
+    width: var(--width);
+  }
 }
 
 .toast .message {