From 1f21d36593f72cd518ad6850609a202d3fdf7ec5 Mon Sep 17 00:00:00 2001
From: Ievgen Sorokopud <ievgen.sorokopud@elastic.co>
Date: Mon, 6 Mar 2023 16:28:04 +0100
Subject: [PATCH] [Security Solution]Rule preview when returns zero value it
 overlaps the No results match your search criteria banner (#151869)

## Summary

Issue #151262

These changes fixes broken empty preview results state on smaller
screens.

Bug:

<img width="1117" alt="Screenshot 2023-02-22 at 15 24 06"
src="https://user-images.githubusercontent.com/2700761/220650014-dff19a56-637a-4c25-aa43-174eea2c91a1.png">

Fix:

<img width="1117" alt="Screenshot 2023-02-22 at 15 23 25"
src="https://user-images.githubusercontent.com/2700761/220650063-33cf4382-d8c8-4b30-acc3-62427094f09a.png">
---
 .../public/common/components/events_viewer/index.tsx          | 2 +-
 .../public/common/components/events_viewer/shared/index.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
index 30ba9db8c033e..ce6db3c16bde7 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -556,7 +556,7 @@ const StatefulEventsViewerComponent: React.FC<EventsViewerProps & PropsFromRedux
                     additionalMenuOptions={additionalRightMenuOptions}
                   />
 
-                  {!hasAlerts && !loading && !graphOverlay && <EmptyTable height="short" />}
+                  {!hasAlerts && !loading && !graphOverlay && <EmptyTable />}
                   {hasAlerts && (
                     <FullWidthFlexGroupTable
                       $visible={!graphEventId && graphOverlay == null}
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/shared/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/shared/index.tsx
index 6e5dd732ff96c..19000f42e59ca 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/shared/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/shared/index.tsx
@@ -47,12 +47,12 @@ const panelStyle = {
   maxWidth: 500,
 };
 
-export const EmptyTable: React.FC<{ height?: keyof typeof heights }> = ({ height = 'tall' }) => {
+export const EmptyTable: React.FC = () => {
   const { http } = useKibana<CoreStart>().services;
 
   return (
     <EuiPanel color="subdued" data-test-subj="tGridEmptyState">
-      <EuiFlexGroup style={{ height: heights[height] }} alignItems="center" justifyContent="center">
+      <EuiFlexGroup alignItems="center" justifyContent="center">
         <EuiFlexItem grow={false}>
           <EuiPanel hasBorder={true} style={panelStyle}>
             <EuiFlexGroup>