From 05d6c22be5f5d48e31fca6a4b3d7b2378f4917e9 Mon Sep 17 00:00:00 2001
From: Denys_Kolomiitsev <143205282+denys-kolomiitsev@users.noreply.github.com>
Date: Fri, 30 Aug 2024 19:23:13 +0200
Subject: [PATCH] fix(chat): Error messages appear for Admin are impossible to
 read (Issue #1944, #1959) (#1970)

---
 apps/chat/src/components/Toasts/Toasts.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/chat/src/components/Toasts/Toasts.tsx b/apps/chat/src/components/Toasts/Toasts.tsx
index 80e40a1c20..ff6efc5217 100644
--- a/apps/chat/src/components/Toasts/Toasts.tsx
+++ b/apps/chat/src/components/Toasts/Toasts.tsx
@@ -7,6 +7,8 @@ import {
 } from '@tabler/icons-react';
 import hotToast, { Toast, ToastBar, Toaster } from 'react-hot-toast';
 
+import { isSmallScreen } from '@/src/utils/app/mobile';
+
 import { ToastType } from '@/src/types/toasts';
 
 const getToastConfigByType = (toastType: ToastType) => {
@@ -52,7 +54,7 @@ export const Toasts = () => (
             borderRadius: '3px',
             borderColor: `var(--stroke-${type})`,
             borderWidth: '1px',
-            maxWidth: '730px',
+            maxWidth: isSmallScreen() ? '100%' : '730px',
             padding: '12px',
           }}
           toast={toast}
@@ -66,10 +68,16 @@ export const Toasts = () => (
                   toast.icon
                 )}
               </span>
-              <div className="mx-0.5 whitespace-pre-wrap text-sm leading-[21px] text-primary *:!whitespace-pre-wrap">
+              <div
+                style={{ wordBreak: 'break-word' }}
+                className="mx-0.5 whitespace-pre-wrap text-sm leading-[21px] text-primary *:!whitespace-pre-wrap"
+              >
                 {message}
               </div>
-              <button onClick={() => hotToast.dismiss(toast.id)}>
+              <button
+                className="mt-0.5 self-start"
+                onClick={() => hotToast.dismiss(toast.id)}
+              >
                 <IconX stroke={1} size={24} className="text-secondary" />
               </button>
             </>