[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 618cf8e5a1)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

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