[Security Solution] Fix a broken header on small screens

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