From 80834d555b306abede566712c12862bc629b619e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Wed, 30 Sep 2020 13:16:16 +0100
Subject: [PATCH] [Observability] Kibana nav when docked overlaps the content
 of the pages. (#78593)

* adding padding left

* adding space left to appSection
---
 .../public/components/app/header/index.tsx           |  2 +-
 .../public/components/app/layout/with_header.tsx     |  4 ----
 .../observability/public/pages/landing/index.tsx     |  5 +++--
 .../observability/public/pages/landing/styles.scss   | 12 ++++++++++++
 4 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 x-pack/plugins/observability/public/pages/landing/styles.scss

diff --git a/x-pack/plugins/observability/public/components/app/header/index.tsx b/x-pack/plugins/observability/public/components/app/header/index.tsx
index e8bd229265e37..543ca2c3b3232 100644
--- a/x-pack/plugins/observability/public/components/app/header/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/header/index.tsx
@@ -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 {
diff --git a/x-pack/plugins/observability/public/components/app/layout/with_header.tsx b/x-pack/plugins/observability/public/components/app/layout/with_header.tsx
index a77487e1244e6..86a8e9089e035 100644
--- a/x-pack/plugins/observability/public/components/app/layout/with_header.tsx
+++ b/x-pack/plugins/observability/public/components/app/layout/with_header.tsx
@@ -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 }>`
diff --git a/x-pack/plugins/observability/public/pages/landing/index.tsx b/x-pack/plugins/observability/public/pages/landing/index.tsx
index 66a52091ae04d..24620f641c204 100644
--- a/x-pack/plugins/observability/public/pages/landing/index.tsx
+++ b/x-pack/plugins/observability/public/pages/landing/index.tsx
@@ -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
diff --git a/x-pack/plugins/observability/public/pages/landing/styles.scss b/x-pack/plugins/observability/public/pages/landing/styles.scss
new file mode 100644
index 0000000000000..5364bf8d10b62
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/landing/styles.scss
@@ -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%;
+  }
+}