From 2def9a817224a982e9a0e6d0124fdd2f94179d38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Wed, 31 Mar 2021 06:59:43 +0200
Subject: [PATCH] TextboxVariable: Limits the length of the preview value
 (#32472)

---
 .../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;
+    `,
   };
 }