[Observability] Kibana nav when docked overlaps the content of the pages. (#78593)

* adding padding left

* adding space left to appSection

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 {

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 }>`

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

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%;
+  }
+}