From eead3e1354cdf72c215946dcdcd1d9da47ab9f5d Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Wed, 27 Mar 2024 17:28:27 +0200
Subject: [PATCH] [v11.0.x] Dashboards: Fix issue where long ad-hoc values
 broke UI (#85290)

Dashboards: Fix issue where long ad-hoc values broke UI (#85073)

Closes #69285

(cherry picked from commit 618cf8e5a103b0cf14c1ed9202b0c36b69d3564a)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 .../adhoc/picker/AdHocFilterValue.tsx          | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx
index ac0b38a6e55..e733043c8b9 100644
--- a/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx
+++ b/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx
@@ -1,7 +1,8 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
 import { AdHocVariableFilter, DataSourceRef, MetricFindValue, SelectableValue } from '@grafana/data';
-import { SegmentAsync } from '@grafana/ui';
+import { SegmentAsync, useStyles2 } from '@grafana/ui';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 import { getDatasourceSrv } from '../../../plugins/datasource_srv';
@@ -25,12 +26,13 @@ export const AdHocFilterValue = ({
   placeHolder,
   allFilters,
 }: Props) => {
+  const styles = useStyles2(getStyles);
   const loadValues = () => fetchFilterValues(datasource, filterKey, allFilters);
 
   return (
     <div className="gf-form" data-testid="AdHocFilterValue-value-wrapper">
       <SegmentAsync
-        className="query-segment-value"
+        className={styles.segment}
         disabled={disabled}
         placeholder={placeHolder}
         value={filterValue}
@@ -58,3 +60,15 @@ const fetchFilterValues = async (
   const metrics = await ds.getTagValues({ key, filters: otherFilters, timeRange });
   return metrics.map((m: MetricFindValue) => ({ label: m.text, value: m.text }));
 };
+
+function getStyles() {
+  return {
+    segment: css({
+      display: 'block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      maxWidth: '500px',
+    }),
+  };
+}