From 52fe9ba3fe93b3ee90c398c8fa89ebfe60f84b5f Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 20 Apr 2022 08:38:51 -0400
Subject: [PATCH] Wrap individual meta items in zIndex: 0 (#47935) (#47941)

(cherry picked from commit e8fc6637ec900ea468d93edca7055050d7d0bba5)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../grafana-ui/src/components/Card/Card.tsx    | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 996339811c8..427a82ddac0 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -232,12 +232,17 @@ const Meta = memo(({ children, className, separator = '|' }: ChildProps & { sepa
   const styles = useStyles2(getMetaStyles);
   let meta = children;
 
+  const filtered = React.Children.toArray(children).filter(Boolean);
+  if (!filtered.length) {
+    return null;
+  }
+  meta = filtered.map((element, i) => (
+    <div key={`element_${i}`} className={styles.metadataItem}>
+      {element}
+    </div>
+  ));
   // Join meta data elements by separator
-  if (Array.isArray(children) && separator) {
-    const filtered = React.Children.toArray(children).filter(Boolean);
-    if (!filtered.length) {
-      return null;
-    }
+  if (filtered.length > 1 && separator) {
     meta = filtered.reduce((prev, curr, i) => [
       prev,
       <span key={`separator_${i}`} className={styles.separator}>
@@ -261,6 +266,9 @@ const getMetaStyles = (theme: GrafanaTheme2) => ({
     margin: theme.spacing(0.5, 0, 0),
     lineHeight: theme.typography.bodySmall.lineHeight,
     overflowWrap: 'anywhere',
+  }),
+  metadataItem: css({
+    // Needed to allow for clickable children in metadata
     zIndex: 0,
   }),
   separator: css({