From 55e9ebcc1e946a1210905c63628c9eb9c39c60a0 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 25 Feb 2021 14:22:52 -0800
Subject: [PATCH] Fix value boosts with long overflowing text

---
 .../relevance_tuning/boosts/boost_item.tsx     | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/boosts/boost_item.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/boosts/boost_item.tsx
index 641628c32659c7c..1dea62b2fd47851 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/boosts/boost_item.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/boosts/boost_item.tsx
@@ -33,18 +33,14 @@ export const BoostItem: React.FC<Props> = ({ id, boost, index, name }) => {
       className="boosts__item"
       buttonContentClassName="boosts__itemButton"
       buttonContent={
-        <EuiFlexGroup responsive={false} wrap>
-          <EuiFlexItem>
-            <EuiFlexGroup responsive={false}>
-              <EuiFlexItem grow={false}>
-                <BoostIcon type={boost.type} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>{BOOST_TYPE_TO_DISPLAY_MAP[boost.type]}</EuiFlexItem>
-              <EuiHideFor sizes={['xs', 's', 'm', 'l']}>
-                <EuiFlexItem>{summary}</EuiFlexItem>
-              </EuiHideFor>
-            </EuiFlexGroup>
+        <EuiFlexGroup responsive={false} alignItems="center">
+          <EuiFlexItem grow={false}>
+            <BoostIcon type={boost.type} />
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>{BOOST_TYPE_TO_DISPLAY_MAP[boost.type]}</EuiFlexItem>
+          <EuiHideFor sizes={['xs', 's', 'm', 'l']}>
+            <EuiFlexItem className="eui-textBreakAll">{summary}</EuiFlexItem>
+          </EuiHideFor>
           <EuiFlexItem grow={false}>
             <ValueBadge>{boost.factor}</ValueBadge>
           </EuiFlexItem>