Fix alerts Count table title overflow wraps prematurely (#115364)

machadoum · web-flow · commit bfe648d49606 · 2021-10-19T09:37:01.000+02:00
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx
@@ -94,7 +94,7 @@ export const AlertsCountPanel = memo<AlertsCountPanelProps>(
         <KpiPanel hasBorder data-test-subj="alertsCountPanel">
           <HeaderSection
             id={uniqueQueryId}
-            title={i18n.COUNT_TABLE_TITLE}
+            title={<span className="eui-textBreakNormal">{i18n.COUNT_TABLE_TITLE}</span>}
             titleSize="s"
             hideSubtitle
           >
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.tsx
@@ -257,7 +257,11 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
     }, [showLinkToAlerts, goToDetectionEngine, formatUrl]);
 
     const titleText = useMemo(
-      () => (onlyField == null ? title : i18n.TOP(onlyField)),
+      () => (
+        <span className="eui-textBreakNormal">
+          {onlyField == null ? title : i18n.TOP(onlyField)}
+        </span>
+      ),
       [onlyField, title]
     );
 

Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@ export const AlertsCountPanel = memo<AlertsCountPanelProps>(`
`94`	`94`	`<KpiPanel hasBorder data-test-subj="alertsCountPanel">`
`95`	`95`	`<HeaderSection`
`96`	`96`	`id={uniqueQueryId}`
`97`		`- title={i18n.COUNT_TABLE_TITLE}`
	`97`	`+ title={<span className="eui-textBreakNormal">{i18n.COUNT_TABLE_TITLE}</span>}`
`98`	`98`	`titleSize="s"`
`99`	`99`	`hideSubtitle`
`100`	`100`	`>`