From 7d8304cb604bd6b0e2900cfca19adbac865e47be Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 29 Jun 2023 11:51:03 -0300
Subject: [PATCH] chore(codeAreaModal): adjust height of code area and error
 message container for better UI fix(codeAreaModal): fix styling issue with
 scrollbar height in code area

---
 src/frontend/src/modals/codeAreaModal/index.tsx | 13 +++++++------
 src/frontend/tailwind.config.js                 |  1 +
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index f50008c72..1e7166c00 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -132,7 +132,7 @@ export default function CodeAreaModal({
           className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
           onValueChange={(value) => setActiveTab(value)}
         >
-          <div className="flex flex-col items-start h-80 px-2">
+          <div className="flex flex-col items-start h-72 px-2">
             <TabsList>
               {tabs.map((tab, index) => (
                 <TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
@@ -141,9 +141,9 @@ export default function CodeAreaModal({
             {tabs.map((tab, index) => (
               <TabsContent
                 value={index.toString()}
-                className="overflow-hidden w-full h-full px-4 pb-4 -mt-1 "
+                className="overflow-hidden w-full h-full px-4 pb-4 mt-1"
               >
-                {tab.name === "code" ? <div className="h-full w-full my-2">
+                {tab.name === "code" ? <div className="h-full w-full">
                   <AceEditor
                     value={code}
                     mode="python"
@@ -159,9 +159,10 @@ export default function CodeAreaModal({
                     }}
                     className="w-full rounded-lg h-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
                   />
-                </div> : <div className="w-full h-full bg-red-400">
-                  <h1>{error?.detail}</h1>
-                  <div></div>
+                </div> : <div className="w-full h-full  bg-red-200 p-2 flex flex-col overflow-scroll custom-scroll text-left">
+                  <h1 className="text-red-600 text-lg">{error?.detail}</h1>
+                  <span className="border border-red-300 w-full"></span>
+                  <div className="text-red-500 text-sm">{error?.traceback}</div>
                   </div>}
               </TabsContent>))
             }
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index b492a8dbf..8e81c0947 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -233,6 +233,7 @@ module.exports = {
         ".custom-scroll": {
           "&::-webkit-scrollbar": {
             width: "8px",
+            height: "8px",
           },
           "&::-webkit-scrollbar-track": {
             backgroundColor: "#f1f1f1",