[6.4] Fix centered dashboard listing (#21119) (#21427)

* Fix centered dashboard listing (#21119)
elastic · Jul 31, 2018 · 8af2540 · 8af2540
1 parent fbdbbc6
commit 8af2540
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 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
@@ -7,9 +7,10 @@ exports[`after fetch hideWriteControls 1`] = `
   restrictWidth={false}
 >
   <EuiPageBody
-    restrictWidth={true}
+    restrictWidth={false}
   >
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -37,9 +38,10 @@ exports[`after fetch initialFilter 1`] = `
   restrictWidth={false}
 >
   <EuiPageBody
-    restrictWidth={true}
+    restrictWidth={false}
   >
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -189,9 +191,10 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
   restrictWidth={false}
 >
   <EuiPageBody
-    restrictWidth={true}
+    restrictWidth={false}
   >
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -249,9 +252,10 @@ exports[`after fetch renders table rows 1`] = `
   restrictWidth={false}
 >
   <EuiPageBody
-    restrictWidth={true}
+    restrictWidth={false}
   >
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -401,9 +405,10 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
   restrictWidth={false}
 >
   <EuiPageBody
-    restrictWidth={true}
+    restrictWidth={false}
   >
     <EuiPageContent
+      className="dashboardLandingPageContent"
       horizontalPosition="center"
       panelPaddingSize="l"
     >
@@ -584,7 +589,7 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
   restrictWidth={false}
 >
   <EuiPageBody
-    restrictWidth={true}
+    restrictWidth={false}
   />
 </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
@@ -433,7 +433,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
+}