[Observability Onboarding] Update styles for header and footer (#184753)

## Summary

~note: there are some issues with stateful rendering of these changes,
so I will try to address those before people review~

Resolves #183368.

The header and footer for the new onboarding flow had some issues that
deviated from the existing designs. This PR is intended to fix those up.

### Before

<img width="1601" alt="image"
src="https://github.com/elastic/kibana/assets/18429259/50c039f8-2684-421e-81dd-57147d4ab85f">

### After

#### Stateful

<img width="1398" alt="image"
src="https://github.com/elastic/kibana/assets/18429259/bb4241de-58fc-4e94-95a4-9bbd1203f6e3">

#### Serverless

<img width="1401" alt="image"
src="https://github.com/elastic/kibana/assets/18429259/2c1faa70-ac95-469d-a51e-c2e5f228e1a8">

x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/footer.tsx

@@ -101,9 +101,9 @@ export const Footer: FunctionComponent = () => {
   ];
 
   return (
-    <EuiFlexGroup justifyContent="center" gutterSize="xl">
+    <EuiFlexGroup gutterSize="xl" justifyContent="center" alignItems="center">
       {sections.map((section, index) => (
-        <EuiFlexItem key={index}>
+        <EuiFlexItem key={index} grow={false}>
           <EuiAvatar size="l" name="" imageUrl={section.iconUrl} color="subdued" />
           <EuiSpacer size="m" />
           <EuiText size="s">

x-pack/plugins/observability_solution/observability_onboarding/public/application/observability_onboarding_flow.tsx

@@ -9,7 +9,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React, { useEffect } from 'react';
 import { Route, Routes } from '@kbn/shared-ux-router';
 import { useLocation } from 'react-router-dom-v5-compat';
-import { EuiPageTemplate, EuiSpacer } from '@elastic/eui';
+import { EuiPageTemplate, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { css } from '@emotion/react';
 import backgroundImageUrl from './header/background.svg';
 import { Footer } from './footer/footer';
@@ -30,41 +30,62 @@ export function ObservabilityOnboardingFlow() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <EuiPageTemplate.Section
-        paddingSize="xl"
+      <EuiPageTemplate
         css={css`
-          & > div {
-            background-image: url(${backgroundImageUrl});
-            background-position: right center;
-            background-repeat: no-repeat;
-          }
+          padding-top: 0px !important;
         `}
-        grow={false}
-        restrictWidth
       >
-        <EuiSpacer size="xl" />
-        <Header />
-      </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section paddingSize="xl" color="subdued" restrictWidth>
-        <Routes>
-          <Route path="/systemLogs">
-            <BackButton />
-            <SystemLogsPanel />
-          </Route>
-          <Route path="/customLogs">
-            <BackButton />
-            <CustomLogsPanel />
-          </Route>
-          <Route>
-            <OnboardingFlowForm />
-          </Route>
-        </Routes>
-        <EuiSpacer size="xl" />
-      </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section paddingSize="xl" grow={false} restrictWidth>
-        <Footer />
-        <EuiSpacer size="xl" />
-      </EuiPageTemplate.Section>
+        <EuiPageTemplate.Section
+          paddingSize="xl"
+          css={css`
+            & > div {
+              background-image: url(${backgroundImageUrl});
+              background-position: right center;
+              background-repeat: no-repeat;
+            }
+          `}
+          grow={false}
+          restrictWidth
+        >
+          <EuiSpacer size="xl" />
+          <Header />
+        </EuiPageTemplate.Section>
+        <EuiPageTemplate.Section paddingSize="xl" color="subdued" restrictWidth>
+          <Routes>
+            <Route path="/systemLogs">
+              <BackButton />
+              <SystemLogsPanel />
+            </Route>
+            <Route path="/customLogs">
+              <BackButton />
+              <CustomLogsPanel />
+            </Route>
+            <Route>
+              <OnboardingFlowForm />
+            </Route>
+          </Routes>
+          <EuiSpacer size="xl" />
+        </EuiPageTemplate.Section>
+        <EuiPageTemplate.Section
+          contentProps={{ css: { paddingBlock: 0 } }}
+          css={css`
+            padding-inline: 0px;
+          `}
+        >
+          <EuiPanel
+            hasBorder
+            css={css`
+              border-radius: 0px;
+              border-left: none;
+              border-bottom: none;
+              border-right: none;
+            `}
+          >
+            <Footer />
+            <EuiSpacer size="xl" />
+          </EuiPanel>
+        </EuiPageTemplate.Section>
+      </EuiPageTemplate>
     </QueryClientProvider>
   );
 }