From 7e270021a8382e9d809229f5c3bf11aefb1d61ce Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Tue, 11 Apr 2023 13:01:57 -0500
Subject: [PATCH] Timeseries: Limit long text in legend (#66307)

---
 .../grafana-ui/src/components/VizLegend/VizLegendListItem.tsx | 4 ++++
 .../src/components/VizLegend/VizLegendTableItem.tsx           | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
index d9ebbaa0b97..d342d261c00 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
@@ -74,6 +74,7 @@ export const VizLegendListItem = <T = unknown,>({
       <button
         disabled={readonly}
         type="button"
+        title={item.label}
         onBlur={onMouseOut}
         onFocus={onMouseOver}
         onMouseOver={onMouseOver}
@@ -100,6 +101,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     font-size: inherit;
     padding: 0;
     user-select: text;
+    max-width: 600px;
+    text-overflow: ellipsis;
+    overflow: hidden;
   `,
   itemDisabled: css`
     label: LegendLabelDisabled;
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
index 981c20403cf..0a2f20f1382 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
@@ -73,6 +73,7 @@ export const LegendTableItem = ({
           <button
             disabled={readonly}
             type="button"
+            title={item.label}
             onBlur={onMouseOut}
             onFocus={onMouseOver}
             onMouseOver={onMouseOver}
@@ -122,6 +123,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       border: none;
       font-size: inherit;
       padding: 0;
+      max-width: 600px;
+      text-overflow: ellipsis;
+      overflow: hidden;
     `,
     labelDisabled: css`
       label: LegendLabelDisabled;