From 9dd37f1e1b24b1d011062fa3bd9c95910fafcbe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 4 Nov 2020 20:27:43 +0100
Subject: [PATCH] Alert: Remove z-index on Alert component so that it does not
 overlay ontop of other content (#28834)

---
 .../grafana-ui/src/components/Alert/Alert.tsx | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index 8ce9a52ea43..c4543d43abb 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -52,26 +52,24 @@ export const Alert: FC<Props> = ({
   const styles = getStyles(theme, severity, !!buttonContent);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.alert} aria-label={selectors.components.Alert.alert(severity)}>
-        <div className={styles.icon}>
-          <Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
-        </div>
-        <div className={styles.body}>
-          <div className={styles.title}>{title}</div>
-          {children && <div>{children}</div>}
-        </div>
-        {/* If onRemove is specified, giving preference to onRemove */}
-        {onRemove ? (
-          <button type="button" className={styles.close} onClick={onRemove}>
-            {buttonContent || <Icon name="times" size="lg" />}
-          </button>
-        ) : onButtonClick ? (
-          <button type="button" className="btn btn-outline-danger" onClick={onButtonClick}>
-            {buttonText}
-          </button>
-        ) : null}
+    <div className={styles.alert} aria-label={selectors.components.Alert.alert(severity)}>
+      <div className={styles.icon}>
+        <Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
       </div>
+      <div className={styles.body}>
+        <div className={styles.title}>{title}</div>
+        {children && <div>{children}</div>}
+      </div>
+      {/* If onRemove is specified, giving preference to onRemove */}
+      {onRemove ? (
+        <button type="button" className={styles.close} onClick={onRemove}>
+          {buttonContent || <Icon name="times" size="lg" />}
+        </button>
+      ) : onButtonClick ? (
+        <button type="button" className="btn btn-outline-danger" onClick={onButtonClick}>
+          {buttonText}
+        </button>
+      ) : null}
     </div>
   );
 };
@@ -84,9 +82,6 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean
   `;
 
   return {
-    container: css`
-      z-index: ${theme.zIndex.tooltip};
-    `,
     alert: css`
       padding: 15px 20px;
       margin-bottom: ${theme.spacing.xs};