[Security Solution] Fix a broken header on small screens (elastic#156525

)

**Resolves:** elastic#155596

## Summary

It fixes a broken header on small screen after adding rule snooze badge component.

*Before:*

![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)
![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)
![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)

*After:*

![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)
![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)
![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)

### Checklist

- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
- [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

(cherry picked from commit 0a9bbe7)

x-pack/plugins/security_solution/public/common/components/header_page/index.tsx

@@ -5,9 +5,16 @@
  * 2.0.
  */
 
-import { EuiProgress, EuiPageHeader, EuiPageHeaderSection, EuiSpacer } from '@elastic/eui';
+import {
+  EuiProgress,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  useEuiTheme,
+} from '@elastic/eui';
 import React from 'react';
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
+import styled, { css as styleCss } from 'styled-components';
 
 import type { LinkIconProps } from '../link_icon';
 import { LinkIcon } from '../link_icon';
@@ -23,19 +30,10 @@ interface HeaderProps {
   isLoading?: boolean;
 }
 
-const Header = styled.header.attrs({
-  className: 'securitySolutionHeaderPage',
-})<HeaderProps>`
-  ${({ border, theme }) => css`
-    margin-bottom: ${theme.eui.euiSizeL};
-  `}
-`;
-Header.displayName = 'Header';
-
 const LinkBack = styled.div.attrs({
   className: 'securitySolutionHeaderPage__linkBack',
 })`
-  ${({ theme }) => css`
+  ${({ theme }) => styleCss`
     font-size: ${theme.eui.euiFontSizeXS};
     line-height: ${theme.eui.euiLineHeight};
     margin-bottom: ${theme.eui.euiSizeS};
@@ -51,6 +49,18 @@ const HeaderSection = styled(EuiPageHeaderSection)`
 `;
 HeaderSection.displayName = 'HeaderSection';
 
+function Divider(): JSX.Element {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <div
+      css={css`
+        border-bottom: ${euiTheme.border.thin};
+      `}
+    />
+  );
+}
+
 interface BackOptions {
   pageId: SecurityPageName;
   text: LinkIconProps['children'];
@@ -110,15 +120,19 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   titleNode,
 }) => (
   <>
-    <EuiPageHeader alignItems="center" bottomBorder={border} rightSideItems={rightSideItems}>
+    <EuiPageHeader alignItems="center" rightSideItems={rightSideItems}>
       <HeaderSection>
         {backOptions && <HeaderLinkBack backOptions={backOptions} />}
         {!backOptions && backComponent && <>{backComponent}</>}
 
         {titleNode || <Title title={title} badgeOptions={badgeOptions} />}
 
-        {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />}
-        {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />}
+        {subtitle && (
+          <>
+            <EuiSpacer size="s" />
+            <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />
+          </>
+        )}
         {border && isLoading && <EuiProgress size="xs" color="accent" />}
       </HeaderSection>
 
@@ -128,6 +142,18 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
         </EuiPageHeaderSection>
       )}
     </EuiPageHeader>
+    {subtitle2 && (
+      <>
+        <EuiSpacer size="xs" />
+        <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />
+      </>
+    )}
+    {border && (
+      <>
+        <EuiSpacer size="m" />
+        <Divider />
+      </>
+    )}
     {/* Manually add a 'padding-bottom' to header */}
     <EuiSpacer size="l" />
   </>

x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx

@@ -10,8 +10,6 @@ import styled, { css } from 'styled-components';
 
 const Wrapper = styled.div`
   ${({ theme }) => css`
-    margin-top: ${theme.eui.euiSizeS};
-
     .siemSubtitle__item {
       color: ${theme.eui.euiTextSubduedColor};
       font-size: ${theme.eui.euiFontSizeXS};