diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/helpers.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/helpers.tsx index 3dea3e71445a1..6c98884451d8f 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/helpers.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/helpers.tsx @@ -192,11 +192,14 @@ export const allowSorting = ({ export const addBuildingBlockStyle = ( ecs: Ecs, theme: EuiTheme, - setCellProps: EuiDataGridCellValueElementProps['setCellProps'] + setCellProps: EuiDataGridCellValueElementProps['setCellProps'], + defaultStyles?: React.CSSProperties ) => { + const currentStyles = defaultStyles ?? {}; if (isEventBuildingBlockType(ecs)) { setCellProps({ style: { + ...currentStyles, backgroundColor: `${theme.eui.euiColorHighlight}`, }, }); @@ -204,6 +207,7 @@ export const addBuildingBlockStyle = ( // reset cell style setCellProps({ style: { + ...currentStyles, backgroundColor: 'inherit', }, }); diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx index cfb292288cd2c..001e405fc10e0 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx @@ -596,10 +596,17 @@ export const BodyComponent = React.memo( const rowData = rowIndex < data.length ? data[rowIndex].data : null; const header = columnHeaders.find((h) => h.id === columnId); const eventId = rowIndex < data.length ? data[rowIndex]._id : null; + const defaultStyles = useMemo( + () => ({ + overflow: 'hidden', + }), + [] + ); + setCellProps({ style: { ...defaultStyles } }); useEffect(() => { - addBuildingBlockStyle(data[rowIndex].ecs, theme, setCellProps); - }, [rowIndex, setCellProps]); + addBuildingBlockStyle(data[rowIndex].ecs, theme, setCellProps, defaultStyles); + }, [rowIndex, setCellProps, defaultStyles]); if (rowData == null || header == null || eventId == null) { return null;