From d41ee6bbc3ef62a01532f86779f9cde322a5e957 Mon Sep 17 00:00:00 2001
From: Brendan O'Handley <brendan.ohandley@grafana.com>
Date: Wed, 11 Sep 2024 08:17:41 -0500
Subject: [PATCH] Explore metrics: Fix long metrics and labels in landing page
 (#92443)

* word wrap long metric names

* trunctate long labels

* use css for filters
---
 public/app/features/trails/DataTrailCard.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/app/features/trails/DataTrailCard.tsx b/public/app/features/trails/DataTrailCard.tsx
index c49e55e909c..e3b508a85b4 100644
--- a/public/app/features/trails/DataTrailCard.tsx
+++ b/public/app/features/trails/DataTrailCard.tsx
@@ -51,7 +51,7 @@ export function DataTrailCard(props: Props) {
 
   return (
     <Card onClick={onSelect} className={styles.card}>
-      <Card.Heading>{getMetricName(metric)}</Card.Heading>
+      <Card.Heading className={styles.wordwrap}>{getMetricName(metric)}</Card.Heading>
       <div className={styles.description}>
         <Stack gap={1.5} wrap="wrap">
           {filters.map((f) => (
@@ -106,9 +106,16 @@ function getStyles(theme: GrafanaTheme2) {
       margin: theme.spacing(1, 0, 0),
       color: theme.colors.text.secondary,
       lineHeight: theme.typography.body.lineHeight,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
     }),
     actions: css({
       marginRight: theme.spacing(1),
     }),
+    wordwrap: css({
+      overflow: 'hidden',
+      overflowWrap: 'anywhere',
+    }),
   };
 }