Fix value boosts with long overflowing text

cee-chen · JasonStoltz · commit dc7707da185f · 2021-02-26T11:55:44.000-05:00
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
@@ -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>
