TextboxVariable: Limits the length of the preview value (#32472)

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