diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts b/x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts
index 26d32b13eede7..b09adc940cf8a 100644
--- a/x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts
+++ b/x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts
@@ -7,28 +7,19 @@
 
 import { useState, useLayoutEffect } from 'react';
 
-// It will recalculate DataGrid height after this time interval.
-const TIME_INTERVAL = 50;
-
-/**
- * You are probably asking yourself "Why 3?". But that is the wrong mindset. You should be asking yourself "why not 3?".
- * 3 (three) is a number, numeral and digit. It is the natural number following 2 and preceding 4, and is the smallest
- * odd prime number and the only prime preceding a square number. It has religious or cultural significance in many societies.
- */
-
-const MAGIC_GAP = 3;
-
 // Hard coded height for every page size
+// rowHeight * pageSize + (filtersHeight + headerHeight + paginationHeight + 1)
+// +1 is for useLayoutEffect to detect the change
 const DATA_GRID_HEIGHT_BY_PAGE_SIZE: { [key: number]: number } = {
-  10: 457,
-  25: 967,
-  50: 1817,
-  100: 3517,
+  10: 389,
+  25: 809,
+  50: 1509,
+  100: 2909,
 };
 
 /**
  * HUGE HACK!!!
- * DataGrtid height isn't properly calculated when the grid has horizontal scroll.
+ * DataGrid height isn't properly calculated when the grid has horizontal scroll.
  * https://github.com/elastic/eui/issues/5030
  *
  * In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.
@@ -36,37 +27,20 @@ const DATA_GRID_HEIGHT_BY_PAGE_SIZE: { [key: number]: number } = {
  * Please delete me and allow DataGrid to calculate its height when the bug is fixed.
  */
 
-const dataGridRowHeight = 36;
-const headerSectionHeight = 32;
-const additionalFiltersHeight = 44;
+const filtersHeight = 32;
+const headerHeight = 40;
+const paginationHeight = 36;
+const rowHeight = 28;
 
 export const useDataGridHeightHack = (pageSize: number, rowCount: number) => {
   const [height, setHeight] = useState(DATA_GRID_HEIGHT_BY_PAGE_SIZE[pageSize]);
 
   useLayoutEffect(() => {
-    setTimeout(() => {
-      const gridVirtualized = document.querySelector('#body-data-grid .euiDataGrid__virtualized');
-
-      if (rowCount === pageSize) {
-        setHeight(DATA_GRID_HEIGHT_BY_PAGE_SIZE[pageSize]);
-      } else if (rowCount <= pageSize) {
-        // This is unnecessary if we add rowCount > pageSize below
-        setHeight(dataGridRowHeight * rowCount + (headerSectionHeight + additionalFiltersHeight));
-      } else if (
-        // rowCount > pageSize && // This will fix the issue but is always full height so has a lot of empty state
-        gridVirtualized &&
-        gridVirtualized.children[0].clientHeight !== gridVirtualized.clientHeight // check if it has vertical scroll
-      ) {
-        setHeight((currHeight) => {
-          return (
-            currHeight +
-            gridVirtualized.children[0].clientHeight -
-            gridVirtualized.clientHeight +
-            MAGIC_GAP
-          );
-        });
-      }
-    }, TIME_INTERVAL);
+    if (rowCount < pageSize) {
+      setHeight(rowHeight * rowCount + (headerHeight + filtersHeight + paginationHeight));
+    } else {
+      setHeight(DATA_GRID_HEIGHT_BY_PAGE_SIZE[pageSize]);
+    }
   }, [pageSize, rowCount]);
 
   return height;