From cc871bd68252cf46f49e6a2ba2f57cbe0fb4b977 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 31 Mar 2021 06:27:23 +0100
Subject: [PATCH] TextboxVariable: Limits the length of the preview value
 (#32472) (#32530)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 2def9a817224a982e9a0e6d0124fdd2f94179d38)

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
---
 .../features/variables/editor/VariableValuesPreview.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/app/features/variables/editor/VariableValuesPreview.tsx b/public/app/features/variables/editor/VariableValuesPreview.tsx
index 51203c9031d..aa4f3c70f0b 100644
--- a/public/app/features/variables/editor/VariableValuesPreview.tsx
+++ b/public/app/features/variables/editor/VariableValuesPreview.tsx
@@ -35,7 +35,7 @@ export const VariableValuesPreview: React.FunctionComponent<VariableValuesPrevie
         {previewOptions.map((o, index) => (
           <InlineFieldRow key={`${o.value}-${index}`} className={styles.optionContainer}>
             <InlineLabel aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption}>
-              {o.text}
+              <div className={styles.label}>{o.text}</div>
             </InlineLabel>
           </InlineFieldRow>
         ))}
@@ -63,5 +63,11 @@ function getStyles(theme: GrafanaTheme) {
       margin-left: ${theme.spacing.xs};
       margin-bottom: ${theme.spacing.xs};
     `,
+    label: css`
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 50vw;
+    `,
   };
 }