[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">
elastic · Nov 15, 2023 · 214f209 · 214f209
1 parent 77bf0cf
commit 214f209
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -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">