frontend/alert: move alert over navbar. fix #126

Tinkerforge · Dec 9, 2024 · f8d4f8e · f8d4f8e
1 parent 6ca62f0
commit f8d4f8e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/frontend/src/components/Alert.tsx b/frontend/src/components/Alert.tsx
@@ -20,7 +20,7 @@ export function showAlert(text: string, variant: string, heading?: string) {
 }
 
 export function ErrorAlert() {
-    return <Alert variant={state.value.variant} onClose={(a, b) => {
+    return <Alert className="custom-alert" variant={state.value.variant} onClose={(a, b) => {
         state.value = {
             text: "",
             show: false,

diff --git a/frontend/src/main.scss b/frontend/src/main.scss
@@ -47,6 +47,7 @@ $navbar-color: #555;
   background-color: $navbar-color;
   box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
   height: $navbar-height;
+  z-index: 1020;
 }
 
 .navbar .navbar-toggler {
@@ -83,3 +84,12 @@ th:hover:has(div) {
   border-bottom-left-radius: 0 !important;
   border-top-left-radius: 0 !important;
 }
+
+.custom-alert {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1021;
+  margin: 0;
+}