[Security Solution][Alert KPI] Fix white space bug in alert KPIs

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_summary_charts_panel/index.tsx

@@ -64,12 +64,7 @@ export const AlertsSummaryChartsPanel: React.FC<Props> = ({
   );
 
   return (
-    <KpiPanel
-      $toggleStatus={isExpanded}
-      data-test-subj="alerts-charts-panel"
-      hasBorder
-      height={panelHeight}
-    >
+    <KpiPanel $toggleStatus={isExpanded} data-test-subj="alerts-charts-panel" hasBorder>
       <HeaderSection
         alignHeader={alignHeader}
         outerDirection="row"
@@ -82,12 +77,7 @@ export const AlertsSummaryChartsPanel: React.FC<Props> = ({
         toggleQuery={toggleQuery}
       />
       {isExpanded && (
-        <StyledFlexGroup
-          data-test-subj="alerts-charts-container"
-          className="eui-yScroll"
-          wrap
-          gutterSize="m"
-        >
+        <StyledFlexGroup data-test-subj="alerts-charts-container" wrap gutterSize="m">
           <StyledFlexItem>
             <SeverityLevelPanel
               filters={filters}

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.test.tsx

@@ -166,25 +166,15 @@ describe('AlertsTreemapPanel', () => {
     );
   });
 
-  it('renders the panel with the expected class to style the overflow-y scroll bar', async () => {
-    render(
-      <TestProviders>
-        <AlertsTreemapPanel {...defaultProps} />
-      </TestProviders>
-    );
-
-    await waitFor(() => expect(screen.getByTestId('treemapPanel')).toHaveClass('eui-yScroll'));
-  });
-
-  it('renders the panel with an auto overflow-y to allow vertical scrolling when necessary when the panel is expanded', async () => {
+  it('renders the panel with a hidden overflow-y when the panel is expanded, delegating scrolling to the inner content', async () => {
     render(
       <TestProviders>
         <AlertsTreemapPanel {...defaultProps} />
       </TestProviders>
     );
 
     await waitFor(() =>
-      expect(screen.getByTestId('treemapPanel')).toHaveStyleRule('overflow-y', 'auto')
+      expect(screen.getByTestId('treemapPanel')).toHaveStyleRule('overflow-y', 'hidden')
     );
   });
 

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.tsx

@@ -8,6 +8,7 @@
 import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/types';
 import type { EuiComboBox } from '@elastic/eui';
 import { EuiProgress } from '@elastic/eui';
+import styled from '@emotion/styled';
 import type { Filter, Query } from '@kbn/es-query';
 import { buildEsQuery } from '@kbn/es-query';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
@@ -29,6 +30,12 @@ import { useKibana } from '../../../../common/lib/kibana';
 
 const DEFAULT_HEIGHT = DEFAULT_MIN_CHART_HEIGHT + 134; // px
 
+const ScrollableContent = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+`;
+
 const COLLAPSED_HEIGHT = 64; // px
 
 const ALERTS_TREEMAP_ID = 'alerts-treemap';
@@ -162,11 +169,9 @@ const AlertsTreemapPanelComponent: React.FC<Props> = ({
   return (
     <InspectButtonContainer>
       <KpiPanel
-        className="eui-yScroll"
         data-test-subj="treemapPanel"
         hasBorder
         height={isPanelExpanded ? height : COLLAPSED_HEIGHT}
-        $overflowY={isPanelExpanded ? 'auto' : 'hidden'}
         $toggleStatus
       >
         <HeaderSection
@@ -203,13 +208,15 @@ const AlertsTreemapPanelComponent: React.FC<Props> = ({
         ) : (
           <>
             {alertsData != null && isPanelExpanded && (
-              <AlertsTreemap
-                addFilter={addFilter}
-                data={alertsData}
-                maxBuckets={DEFAULT_STACK_BY_FIELD0_SIZE}
-                stackByField0={stackByField0}
-                stackByField1={stackByField1}
-              />
+              <ScrollableContent>
+                <AlertsTreemap
+                  addFilter={addFilter}
+                  data={alertsData}
+                  maxBuckets={DEFAULT_STACK_BY_FIELD0_SIZE}
+                  stackByField0={stackByField0}
+                  stackByField1={stackByField1}
+                />
+              </ScrollableContent>
             )}
           </>
         )}

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/index.tsx

@@ -172,7 +172,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
   ]);
 
   return (
-    <div data-test-subj="chartPanels">
+    <div data-test-subj="chartPanels" css={{ 'max-height': CHART_PANEL_HEIGHT, overflow: 'auto' }}>
       {alertViewSelection === 'trend' && (
         <FullHeightFlexItem grow={2}>
           {isLoadingIndexPattern ? (

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx

@@ -10,7 +10,6 @@ import { EuiPanel, EuiComboBox } from '@elastic/eui';
 import styled from 'styled-components';
 import type { LegacyRef } from 'react';
 import React, { useCallback, useMemo } from 'react';
-import { PANEL_HEIGHT, MOBILE_PANEL_HEIGHT } from './config';
 import { useStackByFields } from './hooks';
 import * as i18n from './translations';
 
@@ -37,18 +36,7 @@ export const KpiPanel = styled(EuiPanel)<{
   position: relative;
   overflow-x: hidden;
   overflow-y: ${({ $overflowY }) => $overflowY ?? 'hidden'};
-  @media only screen and (min-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {
-    ${({ height, $toggleStatus }) =>
-      $toggleStatus &&
-      `
-      height: ${height != null ? height : PANEL_HEIGHT}px;
-  `}
-  }
-  ${({ $toggleStatus }) =>
-    $toggleStatus &&
-    `
-    height: ${MOBILE_PANEL_HEIGHT}px;
-  `}
+  ${({ height }) => height != null && `height: ${height}px;`}
 `;
 interface StackedBySelectProps {
   'aria-label'?: string;

x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/kpis/attacks_summary_panel.tsx

@@ -15,7 +15,6 @@ import { AttacksVolumePanel } from './attacks_volume_panel/attacks_volume_panel'
 import { KpiPanel } from '../../alerts_kpis/common/components';
 import { HeaderSection } from '../../../../common/components/header_section';
 import { KPIS_SECTION } from './kpis_section';
-import { CHART_PANEL_HEIGHT } from './common/constants';
 import type { AttacksKpiPanelBaseProps } from './types';
 
 const StyledFlexGroup = styled(EuiFlexGroup)`
@@ -41,13 +40,7 @@ export interface AttacksSummaryPanelProps extends AttacksKpiPanelBaseProps {
 export const AttacksSummaryPanel: React.FC<AttacksSummaryPanelProps> = React.memo(
   ({ filters, query, dataView, title, isExpanded, setIsExpanded }) => {
     return (
-      <KpiPanel
-        data-test-subj={KPIS_SECTION}
-        hasBorder
-        paddingSize="m"
-        $toggleStatus={isExpanded}
-        height={CHART_PANEL_HEIGHT}
-      >
+      <KpiPanel data-test-subj={KPIS_SECTION} hasBorder paddingSize="m" $toggleStatus={isExpanded}>
         <HeaderSection
           alignHeader="flexStart"
           hideSubtitle
@@ -57,12 +50,7 @@ export const AttacksSummaryPanel: React.FC<AttacksSummaryPanelProps> = React.mem
           toggleQuery={setIsExpanded}
         />
         {isExpanded && (
-          <StyledFlexGroup
-            data-test-subj="summary-view-content"
-            className="eui-yScroll"
-            wrap
-            gutterSize="m"
-          >
+          <StyledFlexGroup data-test-subj="summary-view-content" wrap gutterSize="m">
             <EuiFlexItem grow={false}>
               <AttacksListPanel filters={filters} query={query} dataView={dataView} />
             </EuiFlexItem>