[Observability] Kibana nav when docked overlaps the content of the pages. (#78593)
* adding padding left * adding space left to appSection
This commit is contained in:
parent
4306082af5
commit
eebe4ad648
|
@ -27,7 +27,7 @@ const Wrapper = styled.div<{ restrictWidth?: number }>`
|
|||
max-width: ${(props) => `${props.restrictWidth}px`};
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
padding: ${(props) => (props.restrictWidth ? 0 : '0 24px')};
|
||||
padding: 0 16px;
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
|
|
|
@ -9,12 +9,8 @@ import React from 'react';
|
|||
import styled from 'styled-components';
|
||||
import { Header } from '../header/index';
|
||||
|
||||
const getPaddingSize = (props: EuiPageProps) => (props.restrictWidth ? 0 : '24px');
|
||||
|
||||
const Page = styled(EuiPage)<EuiPageProps>`
|
||||
background: transparent;
|
||||
padding-right: ${getPaddingSize};
|
||||
padding-left: ${getPaddingSize};
|
||||
`;
|
||||
|
||||
const Container = styled.div<{ color?: string }>`
|
||||
|
|
|
@ -23,6 +23,7 @@ import { WithHeaderLayout } from '../../components/app/layout/with_header';
|
|||
import { usePluginContext } from '../../hooks/use_plugin_context';
|
||||
import { useTrackPageview } from '../../hooks/use_track_metric';
|
||||
import { appsSection } from '../home/section';
|
||||
import './styles.scss';
|
||||
|
||||
const EuiCardWithoutPadding = styled(EuiCard)`
|
||||
padding: 0;
|
||||
|
@ -43,7 +44,7 @@ export function LandingPage() {
|
|||
>
|
||||
<EuiFlexGroup direction="column">
|
||||
{/* title and description */}
|
||||
<EuiFlexItem style={{ maxWidth: '50%' }}>
|
||||
<EuiFlexItem className="obsLanding__title">
|
||||
<EuiTitle size="s">
|
||||
<h2>
|
||||
{i18n.translate('xpack.observability.home.sectionTitle', {
|
||||
|
@ -65,7 +66,7 @@ export function LandingPage() {
|
|||
<EuiSpacer size="s" />
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGrid columns={2}>
|
||||
<EuiFlexGrid columns={2} className="obsLanding__appSection">
|
||||
{appsSection.map((app) => (
|
||||
<EuiFlexItem key={app.id}>
|
||||
<EuiCardWithoutPadding
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
.obsLanding__appSection .euiFlexItem {
|
||||
@include euiBreakpoint('xs', 's', 'm', 'l') {
|
||||
// overrides .euiFlexItem flex basis
|
||||
flex-basis: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.obsLanding__title {
|
||||
@include euiBreakpoint('m', 'l', 'xl') {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue