adjusted toast message width for mobile experience (#577)

* adjusted toast message width for mobile experience

* updated toast containerStyle

src/hooks/use-alert.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { useToast } from "@chakra-ui/react";
-
+import useMobileBreakpoint from "../hooks/use-mobile-breakpoint";
 export type AlertArguments = {
   // Use `id` if you want to avoid duplicate alerts showing
   id?: string;
@@ -21,7 +21,12 @@ function truncateMessage(message?: string): string {
 }
 
 export function useAlert() {
-  const toast = useToast();
+  const isMobile = useMobileBreakpoint();
+  const toast = useToast({
+    containerStyle: {
+      width: isMobile ? "90vw" : "initial",
+    },
+  });
 
   const info = useCallback(
     ({ id, title, message }: AlertArguments) =>