From 801c17f6d6020dd045d12efc3e7e67dd2a99d94d Mon Sep 17 00:00:00 2001
From: Maxim Kholod <maxim.kholod@elastic.co>
Date: Thu, 22 Aug 2024 17:38:25 +0200
Subject: [PATCH] [Cloud Security] fix responsiveness on the Benchmark Rules
 page (#191080)

## Summary

It ain't much but it's honest work

- fixes https://github.com/elastic/kibana/issues/181641
- part pf https://github.com/elastic/security-team/issues/10316

## Screencast
tbh before is not as bad as in the linked ticket, so we can also leave
it as it is until we do responsiveness on this page properly.

before


[screencast-localhost_5601-2024.08.22-15_14_34.webm](https://github.com/user-attachments/assets/4f119203-6a91-4a52-9514-3489789649ce)

after


[screencast-localhost_5601-2024.08.22-15_05_32.webm](https://github.com/user-attachments/assets/36276e71-8d2d-4095-b2b6-e5524f6d0692)
---
 .../public/pages/rules/rules_counters.tsx                       | 2 +-
 .../public/pages/rules/rules_table_header.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx
index ec8d4a653c222c..dc8de41c0bf7bd 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx
@@ -272,7 +272,7 @@ export const RulesCounters = ({
   ];
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup wrap={true}>
       {counters.map((counter) => (
         <EuiFlexItem key={counter.id}>
           <CspCounterCard {...counter} />
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx
index 116bae053fd32e..3350dc26156d55 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx
@@ -106,7 +106,7 @@ export const RulesTableHeader = ({
 
   return (
     <EuiFlexGroup direction="column">
-      <EuiFlexGroup>
+      <EuiFlexGroup wrap={true}>
         <EuiFlexItem grow={1}>
           <SearchField isSearching={isSearching} searchValue={searchValue} search={search} />
         </EuiFlexItem>