From 0eac386a31a5d6965536360aa65a44769c1a5740 Mon Sep 17 00:00:00 2001
From: Ibrahim <93064150+IbrahimCSAE@users.noreply.github.com>
Date: Wed, 14 Feb 2024 08:51:17 -0500
Subject: [PATCH] feat(errorboundary): format stack trace properly (#3931)

---
 .../src/components/ErrorBoundary/ErrorBoundary.tsx   | 12 +++++++++---
 platform/ui/src/components/Modal/Modal.tsx           |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
index c8170e60d..df87cce97 100644
--- a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -24,8 +24,12 @@ const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute })
       <p className="text-primary-light text-base">{subtitle}</p>
       {!isProduction && (
         <div className="bg-secondary-dark mt-5 space-y-2 rounded-md p-5 font-mono">
-          <p className="text-primary-light">{t('Context')}: {context}</p>
-          <p className="text-primary-light">{t('Error Message')}: {error.message}</p>
+          <p className="text-primary-light">
+            {t('Context')}: {context}
+          </p>
+          <p className="text-primary-light">
+            {t('Error Message')}: {error.message}
+          </p>
 
           <IconButton
             variant="contained"
@@ -44,7 +48,9 @@ const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute })
             </React.Fragment>
           </IconButton>
 
-          {showDetails && <p className="text-primary-light px-4">Stack: {error.stack}</p>}
+          {showDetails && (
+            <pre className="text-primary-light whitespace-pre-wrap px-4">Stack: {error.stack}</pre>
+          )}
         </div>
       )}
     </div>
diff --git a/platform/ui/src/components/Modal/Modal.tsx b/platform/ui/src/components/Modal/Modal.tsx
index 5b4692cf1..783f9c9fb 100644
--- a/platform/ui/src/components/Modal/Modal.tsx
+++ b/platform/ui/src/components/Modal/Modal.tsx
@@ -53,7 +53,7 @@ const Modal = ({
 
   return (
     <ReactModal
-      className="relative max-h-full w-11/12 text-white outline-none lg:w-10/12  xl:w-1/2"
+      className="relative max-h-full w-11/12 text-white outline-none lg:w-10/12  xl:w-9/12"
       overlayClassName="fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-start justify-center py-16"
       shouldCloseOnEsc={shouldCloseOnEsc}
       onRequestClose={handleClose}