diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
index 9cb9f28612b15..d00bd7040c164 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`HeaderPage it renders 1`] = `
     alignItems="center"
     bottomBorder={true}
   >
-    <EuiPageHeaderSection>
+    <HeaderSection>
       <Memo(TitleComponent)
         badgeOptions={
           Object {
@@ -25,7 +25,7 @@ exports[`HeaderPage it renders 1`] = `
         data-test-subj="header-page-subtitle-2"
         items="Test subtitle 2"
       />
-    </EuiPageHeaderSection>
+    </HeaderSection>
     <EuiPageHeaderSection
       data-test-subj="header-page-supplements"
     >
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap
index ca02d0ac5cb2d..176902ae38d20 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap
@@ -4,20 +4,22 @@ exports[`Title it renders 1`] = `
 <EuiTitle
   size="l"
 >
-  <h1
+  <Header
     data-test-subj="header-page-title"
   >
-    <TruncatableText
-      tooltipContent="Test title"
-    >
-      Test title
-    </TruncatableText>
+    <TitleWrapper>
+      <TruncatableText
+        tooltipContent="Test title"
+      >
+        Test title
+      </TruncatableText>
+    </TitleWrapper>
      
     <StyledEuiBetaBadge
       label="Beta"
       tooltipContent="Test tooltip"
       tooltipPosition="bottom"
     />
-  </h1>
+  </Header>
 </EuiTitle>
 `;
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
index 1c87d70c0c7cb..75453f2d759fb 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
@@ -55,6 +55,14 @@ const Badge = (styled(EuiBadge)`
 ` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
+const HeaderSection = styled(EuiPageHeaderSection)`
+  // Without  min-width: 0, as a flex child, it wouldn't shrink properly
+  // and could overflow its parent.
+  min-width: 0;
+  max-width: 100%;
+`;
+HeaderSection.displayName = 'HeaderSection';
+
 interface BackOptions {
   href: LinkIconProps['href'];
   text: LinkIconProps['children'];
@@ -105,7 +113,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   return (
     <>
       <EuiPageHeader alignItems="center" bottomBorder={border}>
-        <EuiPageHeaderSection>
+        <HeaderSection>
           {backOptions && (
             <LinkBack>
               <LinkIcon
@@ -132,7 +140,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
           {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />}
           {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />}
           {border && isLoading && <EuiProgress size="xs" color="accent" />}
-        </EuiPageHeaderSection>
+        </HeaderSection>
 
         {children && (
           <EuiPageHeaderSection data-test-subj="header-page-supplements">
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx
index 471d539ea03f4..a99132d5c7f62 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx
@@ -24,6 +24,19 @@ const Badge = (styled(EuiBadge)`
 ` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
+const Header = styled.h1`
+  display: flex;
+  align-items: center;
+`;
+Header.displayName = 'Header';
+
+const TitleWrapper = styled.span`
+  // Without  min-width: 0, as a flex child, it wouldn't shrink properly
+  // and could overflow its parent.
+  min-width: 0;
+`;
+TitleWrapper.displayName = 'TitleWrapper';
+
 interface Props {
   badgeOptions?: BadgeOptions;
   title: TitleProp;
@@ -32,9 +45,11 @@ interface Props {
 
 const TitleComponent: React.FC<Props> = ({ draggableArguments, title, badgeOptions }) => (
   <EuiTitle size="l">
-    <h1 data-test-subj="header-page-title">
+    <Header data-test-subj="header-page-title">
       {!draggableArguments ? (
-        <TruncatableText tooltipContent={title}>{title}</TruncatableText>
+        <TitleWrapper>
+          <TruncatableText tooltipContent={title}>{title}</TruncatableText>
+        </TitleWrapper>
       ) : (
         <DefaultDraggable
           data-test-subj="header-page-draggable"
@@ -53,13 +68,13 @@ const TitleComponent: React.FC<Props> = ({ draggableArguments, title, badgeOptio
               tooltipPosition="bottom"
             />
           ) : (
-            <Badge color="hollow" title="">
+            <Badge color={badgeOptions.color || 'hollow'} title="">
               {badgeOptions.text}
             </Badge>
           )}
         </>
       )}
-    </h1>
+    </Header>
   </EuiTitle>
 );
 
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/types.ts b/x-pack/plugins/security_solution/public/common/components/header_page/types.ts
index e95d0c8e1e69c..f099144eeb4be 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/types.ts
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/types.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiBadgeProps } from '@elastic/eui';
 import type React from 'react';
 export type TitleProp = string | React.ReactNode;
 
@@ -17,4 +18,5 @@ export interface BadgeOptions {
   beta?: boolean;
   text: string;
   tooltip?: string;
+  color?: EuiBadgeProps['color'];
 }
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
index b4f1af41a0606..92679cb2662d7 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
@@ -18,7 +18,6 @@ import {
   EuiTabs,
   EuiToolTip,
   EuiWindowEvent,
-  EuiBadge,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { noop } from 'lodash/fp';
@@ -115,6 +114,7 @@ import { NeedAdminForUpdateRulesCallOut } from '../../../../components/callouts/
 import { getRuleStatusText } from '../../../../../../common/detection_engine/utils';
 import { MissingPrivilegesCallOut } from '../../../../components/callouts/missing_privileges_callout';
 import { useRuleWithFallback } from '../../../../containers/detection_engine/rules/use_rule_with_fallback';
+import { BadgeOptions } from '../../../../../common/components/header_page/types';
 
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
@@ -253,15 +253,20 @@ const RuleDetailsPageComponent = () => {
   const title = useMemo(
     () => (
       <>
-        {rule?.name}{' '}
-        {ruleLoading ? (
-          <EuiLoadingSpinner size="m" />
-        ) : (
-          !isExistingRule && <EuiBadge>{i18n.DELETED_RULE}</EuiBadge>
-        )}
+        {rule?.name} {ruleLoading && <EuiLoadingSpinner size="m" />}
       </>
     ),
-    [rule, ruleLoading, isExistingRule]
+    [rule, ruleLoading]
+  );
+  const badgeOptions = useMemo<BadgeOptions | undefined>(
+    () =>
+      !ruleLoading && !isExistingRule
+        ? {
+            text: i18n.DELETED_RULE,
+            color: 'default',
+          }
+        : undefined,
+    [isExistingRule, ruleLoading]
   );
   const subTitle = useMemo(
     () =>
@@ -595,6 +600,7 @@ const RuleDetailsPageComponent = () => {
                   </>,
                 ]}
                 title={title}
+                badgeOptions={badgeOptions}
               >
                 <EuiFlexGroup alignItems="center">
                   <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx b/x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx
index a9a97f6bac652..d9d5ac9241f19 100644
--- a/x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx
@@ -149,7 +149,7 @@ describe('Network Details', () => {
     );
     expect(
       wrapper
-        .find('[data-test-subj="network-details-headline"] [data-test-subj="header-page-title"]')
+        .find('[data-test-subj="network-details-headline"] h1[data-test-subj="header-page-title"]')
         .text()
     ).toEqual('fe80::24ce:f7ff:fede:a571');
   });