From 0733b56b8f5ad5765eb9d2c375468d3658b69b0d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 6 Jul 2023 19:30:37 -0300
Subject: [PATCH] refactor(codeAreaModal/v2.tsx): improve code readability and
 error display in CodeAreaModal component

The changes in this commit include:
- Added `overflow-y-scroll` and `overflow-x-clip` classes to the error message container to enable vertical scrolling and prevent horizontal scrolling.
- Added `break-all` class to the error message and traceback to ensure long lines of text are broken and wrapped within the container.
- Added `whitespace-pre-wrap` class to the error message to preserve whitespace and line breaks.

These changes were made to improve the readability of the code and enhance the display of error messages in the CodeAreaModal component.
---
 src/frontend/src/modals/codeAreaModal/v2.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/codeAreaModal/v2.tsx b/src/frontend/src/modals/codeAreaModal/v2.tsx
index 965acf05b..13d522039 100644
--- a/src/frontend/src/modals/codeAreaModal/v2.tsx
+++ b/src/frontend/src/modals/codeAreaModal/v2.tsx
@@ -141,9 +141,9 @@ export default function CodeAreaModal({
                         />
                     </div>
                     <div className={"w-full transition-all delay-500 " + (error?.detail.error !== undefined ? "h-2/6" : "h-0")}>
-                        <div className="w-full h-full overflow-auto custom-scroll text-left mt-1">
+                        <div className="w-full h-full overflow-y-scroll overflow-x-clip custom-scroll text-left mt-1">
                             <h1 className="text-destructive text-lg">{error?.detail?.error}</h1>
-                            <div className="text-status-red text-sm ml-2"><pre>{error?.detail?.traceback}</pre></div>
+                            <div className="text-status-red text-sm ml-2 w-full break-all"><pre className="w-full break-all whitespace-pre-wrap">{error?.detail?.traceback}</pre></div>
                         </div>
                     </div>
                     <div className="h-fit w-full flex justify-end">