FIxed gap in modal and errors not displaying at CodeAreaModal

src/frontend/src/modals/baseModal/index.tsx

@@ -105,8 +105,9 @@ function BaseModal({
       <DialogContent className={minWidth}>
         {headerChild}
         <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
-
+        {ContentFooter && (
           <div className="flex flex-row-reverse">{ContentFooter}</div>
+        )}
       </DialogContent>
     </Dialog>
   );

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -148,9 +148,26 @@ export default function CodeAreaModal({
               onChange={(value) => {
                 setCode(value);
               }}
-              className="h-full w-full rounded-lg border-[1px] border-border custom-scroll"
+              className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
             />
           </div>
+          <div
+            className={
+              "w-full transition-all delay-500 " +
+              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
+            }
+          >
+            <div className="mt-1 h-full w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
+              <h1 className="text-lg text-destructive">
+                {error?.detail?.error}
+              </h1>
+              <div className="ml-2 w-full break-all text-sm text-status-red">
+                <pre className="w-full whitespace-pre-wrap break-all">
+                  {error?.detail?.traceback}
+                </pre>
+              </div>
+            </div>
+          </div>
           <div className="flex h-fit w-full justify-end">
             <Button className="mt-3" onClick={handleClick} type="submit">
               Check & Save