From 33c6f4b01d5f42304f5c795ee3eec3ae433a3d2c Mon Sep 17 00:00:00 2001 From: jennypavlova Date: Tue, 20 Sep 2022 13:14:12 +0200 Subject: [PATCH] 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 --- .../infra/public/page_template.styles.ts | 18 ++++++++++++++++++ .../public/pages/logs/stream/page_content.tsx | 12 ++---------- .../infra/public/pages/metrics/hosts/index.tsx | 13 ++----------- .../pages/metrics/inventory_view/index.tsx | 12 ++---------- 4 files changed, 24 insertions(+), 31 deletions(-) create mode 100644 x-pack/plugins/infra/public/page_template.styles.ts diff --git a/x-pack/plugins/infra/public/page_template.styles.ts b/x-pack/plugins/infra/public/page_template.styles.ts new file mode 100644 index 0000000000000..97fb7fcc46afb --- /dev/null +++ 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 index 2bafa8e2fc571..23c3b8ab8838a 100644 --- 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 index c2c8d3f435bd2..5c2fed9753b80 100644 --- 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 index 113279a7c8391..8031af55828c4 100644 --- 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, }, }} >