Fix add sample data layout

elastic · Jun 18, 2021 · 28dfd22 · 28dfd22
1 parent b9f64b7
commit 28dfd22
Showing 1 changed file with 19 additions and 24 deletions.
diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -235,7 +235,7 @@ class TutorialDirectoryUi extends React.Component {
   renderNotices = () => {
     const notices = getServices().tutorialService.getDirectoryNotices();
     return notices.length ? (
-      <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexGroup grow={false} direction="column" gutterSize="none">
         {notices.map((DirectoryNotice, index) => (
           <EuiFlexItem key={index}>
             <DirectoryNotice />
@@ -259,38 +259,33 @@ class TutorialDirectoryUi extends React.Component {
   };
 
   renderHeader = () => {
-    const notices = this.renderNotices();
     const headerLinks = this.renderHeaderLinks();
-
     return (
-      <>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>
-                <FormattedMessage
-                  id="home.tutorial.addDataToKibanaTitle"
-                  defaultMessage="Add data"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          {headerLinks ? <EuiFlexItem grow={false}>{headerLinks}</EuiFlexItem> : null}
-        </EuiFlexGroup>
-        {notices}
-      </>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
+          <EuiTitle size="l">
+            <h1>
+              <FormattedMessage id="home.tutorial.addDataToKibanaTitle" defaultMessage="Add data" />
+            </h1>
+          </EuiTitle>
+        </EuiFlexItem>
+        {headerLinks ? <EuiFlexItem grow={false}>{headerLinks}</EuiFlexItem> : null}
+      </EuiFlexGroup>
     );
   };
 
   render() {
     return (
       <EuiPage restrictWidth={1200}>
         <EuiPageBody>
-          {this.renderHeader()}
-          <EuiSpacer size="m" />
-          <EuiTabs>{this.renderTabs()}</EuiTabs>
-          <EuiSpacer />
-          {this.renderTabContent()}
+          <EuiFlexItem grow={false}>
+            {this.renderHeader()}
+            {this.renderNotices()}
+            <EuiSpacer size="m" />
+            <EuiTabs>{this.renderTabs()}</EuiTabs>
+            <EuiSpacer />
+            {this.renderTabContent()}
+          </EuiFlexItem>
         </EuiPageBody>
       </EuiPage>
     );