Fix centered dashboard listing (#21119)

elastic · Jul 24, 2018 · 3bc65f1 · 3bc65f1
1 parent 3e9c26a
commit 3bc65f1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/...core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap b/...core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
@@ -6,10 +6,9 @@ exports[`after fetch hideWriteControls 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody
-    restrictWidth={true}
-  >
+  <EuiPageBody>
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -36,10 +35,9 @@ exports[`after fetch initialFilter 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody
-    restrictWidth={true}
-  >
+  <EuiPageBody>
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -188,10 +186,9 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody
-    restrictWidth={true}
-  >
+  <EuiPageBody>
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -248,10 +245,9 @@ exports[`after fetch renders table rows 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody
-    restrictWidth={true}
-  >
+  <EuiPageBody>
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -400,10 +396,9 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody
-    restrictWidth={true}
-  >
+  <EuiPageBody>
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -583,8 +578,6 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody
-    restrictWidth={true}
-  />
+  <EuiPageBody />
 </EuiPage>
 `;
diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -454,7 +454,7 @@ export class DashboardListing extends React.Component {
     }
 
     return (
-      <EuiPageContent horizontalPosition="center">
+      <EuiPageContent className="dashboardLandingPageContent" horizontalPosition="center">
         {this.renderListingOrEmptyState()}
       </EuiPageContent>
     );
@@ -463,7 +463,8 @@ export class DashboardListing extends React.Component {
   render() {
     return (
       <EuiPage data-test-subj="dashboardLandingPage" className="dashboardLandingPage">
-        <EuiPageBody restrictWidth>
+        {/* TODO: add restrictWidth prop on EuiPageBody here when [email protected] is applied */}
+        <EuiPageBody>
           {this.renderPageContent()}
         </EuiPageBody>
       </EuiPage>

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -434,7 +434,16 @@ dashboard-viewport-provider {
   }
 }
 
-.dashboardLandingPage {
+// Mimics EuiPageBackground
+dashboard-listing {
+  background-color: @globalColorLightestGray;
   min-height: 100vh;
+}
+
+.dashboardLandingPage {
   background: @globalColorLightestGray;
 }
+
+.dashboardLandingPageContent {
+  max-width: 1000px !important; // Temp fix till [email protected] is merged
+}