From 214f209bf6325d1b9786e67da81e6056fb6cf5ca Mon Sep 17 00:00:00 2001
From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Date: Wed, 15 Nov 2023 14:11:01 +0100
Subject: [PATCH] [Unified Fieldlist] field top stats values truncate to 3
 lines (#171076)

## Summary

Makes the values for field popover to truncate to 3 lines instead of to
1 line.

before:
<img width="351" alt="Screenshot 2023-11-13 at 13 53 43"
src="https://github.com/elastic/kibana/assets/4283304/bfc9f2cf-74d3-424a-9b09-0d2449b5a6ba">

after:

<img width="853" alt="Screenshot 2023-11-13 at 13 53 25"
src="https://github.com/elastic/kibana/assets/4283304/0909d322-1624-425b-8daf-02d3739c912f">


Also makes the container stretching more to fit the content:

no widening:
<img width="330" alt="Screenshot 2023-11-13 at 14 01 59"
src="https://github.com/elastic/kibana/assets/4283304/7cf6209d-c80b-4d73-94c1-3bf98bb91366">
widening:
<img width="436" alt="Screenshot 2023-11-13 at 14 03 16"
src="https://github.com/elastic/kibana/assets/4283304/1b89ed1e-e362-4c43-a574-087745632980">
---
 .../src/components/field_popover/field_popover.scss |  2 +-
 .../field_stats/field_top_values_bucket.tsx         | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/kbn-unified-field-list/src/components/field_popover/field_popover.scss b/packages/kbn-unified-field-list/src/components/field_popover/field_popover.scss
index 8e5a7d5963a8b..b8fe997d01c13 100644
--- a/packages/kbn-unified-field-list/src/components/field_popover/field_popover.scss
+++ b/packages/kbn-unified-field-list/src/components/field_popover/field_popover.scss
@@ -3,5 +3,5 @@
 
 .unifiedFieldList__fieldPopover__fieldPopoverPanel {
   min-width: $euiSizeXXL * 6.5 !important; /* 1 */
-  max-width: $euiSizeXXL * 7.5 !important;
+  max-width: $euiSizeXXL * 10 !important;
 }
diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx
index ccae2a3dfffc1..f296fe74906eb 100755
--- a/packages/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx
+++ b/packages/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx
@@ -13,6 +13,7 @@ import {
   EuiFlexItem,
   EuiProgress,
   EuiText,
+  EuiTextBlockTruncate,
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -84,14 +85,18 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
         <EuiFlexGroup alignItems="stretch" gutterSize="s" responsive={false}>
           <EuiFlexItem
             grow={true}
-            className="eui-textTruncate"
             data-test-subj={`${dataTestSubject}-topValues-formattedFieldValue`}
+            css={css`
+              overflow-wrap: break-word;
+            `}
           >
             {(formattedFieldValue?.length ?? 0) > 0 ? (
               <EuiToolTip content={formattedFieldValue} delay="long">
-                <EuiText size="xs" className="eui-textTruncate" color={'subdued'} {...textProps}>
-                  {formattedFieldValue}
-                </EuiText>
+                <EuiTextBlockTruncate lines={3}>
+                  <EuiText size="xs" color={'subdued'} {...textProps}>
+                    {formattedFieldValue}
+                  </EuiText>
+                </EuiTextBlockTruncate>
               </EuiToolTip>
             ) : (
               <EuiText size="xs">