From 9014e113f5f3e3dd8989698ba8f925ad1f824af5 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Tue, 24 Aug 2021 07:44:27 -0400
Subject: [PATCH] [Security Solution][RAC] -  Hide hover actions overflow
 (#109693)

* add overflow

* fix types error
---
 .../public/components/t_grid/body/helpers.tsx         |  6 +++++-
 .../timelines/public/components/t_grid/body/index.tsx | 11 +++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

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 3dea3e71445a..6c98884451d8 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 cfb292288cd2..001e405fc10e 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<StatefulBodyProps>(
         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;