when there is a problem with data when adding overlay show toast

src/redux/overlays/overlays.thunks.ts

@@ -15,6 +15,7 @@ import { showToast } from '@/utils/showToast';
 import { ThunkConfig } from '@/types/store';
 import { BASE_API_URL } from '@/constants';
 import { getError } from '@/utils/error-report/getError';
+import axios from 'axios';
 import { apiPath } from '../apiPath';
 import {
   CHUNK_SIZE,
@@ -221,7 +222,12 @@ export const addOverlay = createAsyncThunk<undefined, AddOverlayArgs, ThunkConfi
 
       showToast({ type: 'success', message: USER_OVERLAY_ADD_SUCCESS_MESSAGE });
     } catch (error) {
-      return Promise.reject(getError({ error, prefix: USER_OVERLAY_ADD_ERROR_PREFIX }));
+      if (axios.isAxiosError(error) && error.code === 'ERR_BAD_REQUEST') {
+        const data = error.response?.data;
+        showToast({ type: 'error', message: data.reason, duration: 120000 });
+      } else {
+        return Promise.reject(getError({ error, prefix: USER_OVERLAY_ADD_ERROR_PREFIX }));
+      }
     }
   },
 );

src/shared/Toast/Toast.component.tsx

@@ -16,7 +16,7 @@ export const Toast = ({ type, message, onDismiss }: ToastArgs): React.ReactNode
   >
     <p
       className={twMerge(
-        'text-base font-bold ',
+        'h-full overflow-y-auto text-base font-bold',
         type === 'error' ? 'text-red-500' : 'text-green-500',
       )}
     >