Fix page responsiveness for smaller screen sizes (#141471)

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. (cherry picked from commit ddf5307)
elastic · Sep 23, 2022 · 3e05860 · 3e05860
1 parent a1f97ef
commit 3e05860
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/...ic/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx b/...ic/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
@@ -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} />