toast styles fix

lib/hooks/useToast.tsx

@@ -10,8 +10,10 @@ import Toast from 'ui/shared/Toast';
 const defaultOptions: UseToastOptions & { toastComponent?: React.FC<ToastProps> } = {
   toastComponent: Toast,
   position: 'top-right',
-  duration: 10000000,
   isClosable: true,
+  containerStyle: {
+    margin: 8,
+  },
 };
 
 export default function useToastModified() {

pages/[network_type]/[network_sub_type]/index.tsx

-import type { AlertStatus } from '@chakra-ui/react';
-import { Center, Button, VStack, HStack, Box } from '@chakra-ui/react';
+import { Center, VStack, Box } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import useToast from 'lib/hooks/useToast';
 import Page from 'ui/shared/Page/Page';
 
 const Home: NextPage = () => {
   const router = useRouter();
-  const toast = useToast();
-
-  const openToast = (status: AlertStatus) => () => {
-    toast({
-      title: 'Account created.',
-      description: 'We\'ve created your account for you.',
-      status,
-    });
-  };
 
   return (
     <Page>
       <Center h="100%">
         <VStack gap={ 4 }>
           <Box>home page for { router.query.network_type } { router.query.network_sub_type } network</Box>
-          <HStack>
-            <Button onClick={ openToast('info') } > Show Info </Button>
-            <Button onClick={ openToast('error') } > Show Error </Button>
-            <Button onClick={ openToast('warning') } > Show Warning </Button>
-            <Button onClick={ openToast('success') } > Show Success </Button>
-          </HStack>
         </VStack>
       </Center>
     </Page>

ui/pages/PublicTags.tsx

 import {
   Box,
-  useToast,
 } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 import { animateScroll } from 'react-scroll';
 
 import type { PublicTag } from 'types/api/account';
 
+import useToast from 'lib/hooks/useToast';
 import PublicTagsData from 'ui/publicTags/PublicTagsData';
 import PublicTagsForm from 'ui/publicTags/PublicTagsForm/PublicTagsForm';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';

ui/shared/Toast.tsx

@@ -45,6 +45,7 @@ const Toast = ({ onClose, title, description, id, isClosable, status }: ToastPro
       bgColor={ bgColor }
       textAlign="start"
       width="auto"
+      maxWidth="400px"
     >
       <chakra.div flex="1" maxWidth="100%">
         { title && <AlertTitle id={ ids?.title }>{ title }</AlertTitle> }