banner style fix (#294)

netobserv · Feb 21, 2023 · 5101014 · 5101014
1 parent e2d9077
commit 5101014
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/web/src/components/alerts/banner.css b/web/src/components/alerts/banner.css
@@ -1,3 +1,9 @@
 .netobserv-alert {
-    margin: 1em;
+    margin: 1.5rem;
+}
+
+.netobserv-alerts-container {
+    position: absolute;
+    width: -webkit-fill-available;
+    z-index: 999;
 }
diff --git a/web/src/components/alerts/fetcher.tsx b/web/src/components/alerts/fetcher.tsx
@@ -44,12 +44,14 @@ export const AlertFetcher: React.FC<AlertFetcherProps> = ({ children }) => {
     return;
   }, []);
   return (
-    <div>
-      {alerts.map(a => (
-        <AlertBanner key={a.name} rule={a} onDelete={() => setAlerts(alerts.filter(alert => alert.name != a.name))} />
-      ))}
+    <>
+      <div className="netobserv-alerts-container">
+        {alerts.map(a => (
+          <AlertBanner key={a.name} rule={a} onDelete={() => setAlerts(alerts.filter(alert => alert.name != a.name))} />
+        ))}
+      </div>
       {!!children ? children : ''}
-    </div>
+    </>
   );
 };