Fix value boosts with long overflowing text

elastic · Feb 26, 2021 · dc7707d · dc7707d
1 parent a948765
commit dc7707d
Showing 1 changed file with 7 additions and 11 deletions.
diff --git a/...e_search/public/applications/app_search/components/relevance_tuning/boosts/boost_item.tsx b/...e_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>