From 6a763993c1458f8b21bdfad4f5f1395db9420d04 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 11 Mar 2024 17:32:57 -0300
Subject: [PATCH] Refactor: Make error alert display above modals

---
 src/frontend/src/App.tsx           | 67 +++++++++++++++++-------------
 src/frontend/src/style/applies.css |  2 +-
 2 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index e2ed136df..0af87df78 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -102,35 +102,44 @@ export default function App() {
         )}
       </ErrorBoundary>
       <div></div>
-      <div className="app-div z-40">
-        {tempNotificationList.map((alert) => (
-          <div key={alert.id}>
-            {alert.type === "error" ? (
-              <ErrorAlert
-                key={alert.id}
-                title={alert.title}
-                list={alert.list}
-                id={alert.id}
-                removeAlert={removeAlert}
-              />
-            ) : alert.type === "notice" ? (
-              <NoticeAlert
-                key={alert.id}
-                title={alert.title}
-                link={alert.link}
-                id={alert.id}
-                removeAlert={removeAlert}
-              />
-            ) : (
-              <SuccessAlert
-                key={alert.id}
-                title={alert.title}
-                id={alert.id}
-                removeAlert={removeAlert}
-              />
-            )}
-          </div>
-        ))}
+      <div className="app-div">
+        <div className="flex flex-col-reverse" style={{zIndex: 999}}>
+          {tempNotificationList.map((alert) => (
+            <div key={alert.id}>
+              {alert.type === "error" && (
+                <ErrorAlert
+                  key={alert.id}
+                  title={alert.title}
+                  list={alert.list}
+                  id={alert.id}
+                  removeAlert={removeAlert}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-col-reverse z-40">
+          {tempNotificationList.map((alert) => (
+            <div key={alert.id}>
+              {alert.type === "notice" ? (
+                <NoticeAlert
+                  key={alert.id}
+                  title={alert.title}
+                  link={alert.link}
+                  id={alert.id}
+                  removeAlert={removeAlert}
+                />
+              ) : alert.type === "success" && (
+                <SuccessAlert
+                  key={alert.id}
+                  title={alert.title}
+                  id={alert.id}
+                  removeAlert={removeAlert}
+                />
+              )}
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 4bb0dd1c4..c4708128b 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -584,7 +584,7 @@
   }
 
   .app-div {
-    @apply fixed bottom-5 left-5 flex flex-col-reverse;
+    @apply absolute bottom-5 left-5 flex flex-col-reverse;
   }
 
   .chat-input-modal-txtarea {