diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx index df7735aef2695..2028e265ad2e7 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx +++ b/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx @@ -5,8 +5,7 @@ * 2.0. */ -import React, { useEffect, useMemo } from 'react'; -import styled from 'styled-components'; +import React, { useEffect } from 'react'; import { EuiPageHeaderProps, EuiPageTemplateProps, useIsWithinMaxBreakpoint } from '@elastic/eui'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { useInspectorContext } from '@kbn/observability-plugin/public'; @@ -22,12 +21,6 @@ interface Props { pageHeader?: EuiPageHeaderProps; } -const mobileCenteredHeader = ` - .euiPageHeaderContent > .euiFlexGroup > .euiFlexItem { - align-items: center; - } -`; - export const UptimePageTemplateComponent: React.FC = ({ path, pageHeader, @@ -37,18 +30,8 @@ export const UptimePageTemplateComponent: React.FC const { services: { observability }, } = useKibana(); - const isMobile = useIsWithinMaxBreakpoint('s'); const PageTemplateComponent = observability.navigation.PageTemplate; - const StyledPageTemplateComponent = useMemo(() => { - return styled(PageTemplateComponent)<{ isMobile: boolean }>` - .euiPageHeaderContent > .euiFlexGroup { - flex-wrap: wrap; - } - - ${(props) => (props.isMobile ? mobileCenteredHeader : '')} - `; - }, [PageTemplateComponent]); const noDataConfig = useNoDataConfig(); @@ -69,8 +52,7 @@ export const UptimePageTemplateComponent: React.FC return ( <> - > {children} - + ); };