Fix missing padding from the page header to the main content (#140706)

* Move styles to the index.scss file to avoid emotion css override * Use emotion css instead of scss
elastic · Sep 20, 2022 · 33c6f4b · 33c6f4b
1 parent ac5064b
commit 33c6f4b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 31 deletions.
diff --git a/x-pack/plugins/infra/public/page_template.styles.ts b/x-pack/plugins/infra/public/page_template.styles.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+
+// This is added `EuiPageSection.contentProps` to facilitate a full height layout whereby the
+// inner container will set its own height and be scrollable.
+export const fullHeightContentStyles = css`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  width: 100%;
+  height: 100%;
+`;
diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx
@@ -8,12 +8,12 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
-import { css } from '@emotion/react';
 import { LogSourceErrorPage } from '../../../components/logging/log_source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useLogViewContext } from '../../../hooks/use_log_view';
 import { LogsPageTemplate } from '../page_template';
 import { LogsPageLogsContent } from './page_logs_content';
+import { fullHeightContentStyles } from '../../../page_template.styles';
 
 const streamTitle = i18n.translate('xpack.infra.logs.streamPageTitle', {
   defaultMessage: 'Stream',
@@ -44,15 +44,7 @@ export const StreamPageContent: React.FunctionComponent = () => {
           }}
           pageSectionProps={{
             contentProps: {
-              // This is added to facilitate a full height layout whereby the
-              // inner container will set its own height and be scrollable.
-              css: css`
-                display: flex;
-                flex-direction: column;
-                flex: 1 0 auto;
-                width: 100%;
-                height: 100%;
-              `,
+              css: fullHeightContentStyles,
             },
           }}
         >

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx
@@ -7,7 +7,6 @@
 
 import { EuiErrorBoundary } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { css } from '@emotion/react';
 import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
@@ -22,6 +21,7 @@ import { MetricsPageTemplate } from '../page_template';
 import { hostsTitle } from '../../../translations';
 import { HostsContent } from './hosts_content';
 import { MetricsDataViewProvider } from './hooks/use_data_view';
+import { fullHeightContentStyles } from '../../../page_template.styles';
 
 export const HostsPage = () => {
   const {
@@ -63,17 +63,8 @@ export const HostsPage = () => {
                 pageTitle: hostsTitle,
               }}
               pageSectionProps={{
-                paddingSize: 'none',
                 contentProps: {
-                  // This is added to facilitate a full height layout whereby the
-                  // inner container will set its own height and be scrollable.
-                  css: css`
-                    display: flex;
-                    flex-direction: column;
-                    flex: 1 0 auto;
-                    width: 100%;
-                    height: 100%;
-                  `,
+                  css: fullHeightContentStyles,
                 },
               }}
             >

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx
@@ -8,7 +8,6 @@
 import { EuiErrorBoundary } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { css } from '@emotion/react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 import { FilterBar } from './components/filter_bar';
@@ -27,6 +26,7 @@ import { MetricsPageTemplate } from '../page_template';
 import { inventoryTitle } from '../../../translations';
 import { SavedViews } from './components/saved_views';
 import { SnapshotContainer } from './components/snapshot_container';
+import { fullHeightContentStyles } from '../../../page_template.styles';
 
 export const SnapshotPage = () => {
   const {
@@ -77,15 +77,7 @@ export const SnapshotPage = () => {
                 }}
                 pageSectionProps={{
                   contentProps: {
-                    // This is added to facilitate a full height layout whereby the
-                    // inner container will set its own height and be scrollable.
-                    css: css`
-                      display: flex;
-                      flex-direction: column;
-                      flex: 1 0 auto;
-                      width: 100%;
-                      height: 100%;
-                    `,
+                    css: fullHeightContentStyles,
                   },
                 }}
               >