From b6ef783b59d35c8b2675db25c99f802842b0082c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Thu, 22 Sep 2022 18:02:11 +0200
Subject: [PATCH] Fix page responsiveness for smaller screen sizes

These fixes makes page wrap properly on smaller devices. It will fix
word breaks on header and make both cards wrap properly when they don't
fit the page.
---
 .../components/search_index/pipelines/pipelines.tsx        | 2 +-
 .../public/applications/shared/data_panel/data_panel.tsx   | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx
index 22c62b1671a37..39d9044e018d6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx
@@ -29,7 +29,7 @@ export const SearchIndexPipelines: React.FC = () => {
   return (
     <>
       <EuiSpacer />
-      <EuiFlexGroup direction="row">
+      <EuiFlexGroup direction="row" wrap>
         <EuiFlexItem grow={5}>
           <DataPanel
             hasBorder
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/data_panel/data_panel.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/data_panel/data_panel.tsx
index dd3d6b28f2547..45ed46772ffe7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/data_panel/data_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/data_panel/data_panel.tsx
@@ -66,7 +66,12 @@ export const DataPanel: React.FC<Props> = ({
       <EuiSplitPanel.Inner>
         <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
           <EuiFlexItem grow>
-            <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+            <EuiFlexGroup
+              className="eui-textNoWrap"
+              gutterSize="s"
+              alignItems="center"
+              responsive={false}
+            >
               {iconType && (
                 <EuiFlexItem grow={false}>
                   <EuiIcon type={iconType} />