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.
elastic · Sep 23, 2022 · b6ef783 · b6ef783
1 parent 54c9c2d
commit b6ef783
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} />