[SECURITY_SOLUTION][ENDPOINT] Fix Policy Details Name to ensure it truncates the value when its too long (#71526)

* Fix title not truncated on policy details

x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/page_view.test.tsx.snap

@@ -25,6 +25,10 @@ exports[`PageView component should display body header custom element 1`] = `
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   bodyHeader={
     <p>
@@ -120,6 +124,10 @@ exports[`PageView component should display body header wrapped in EuiTitle 1`] =
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   bodyHeader="body header"
   viewType="list"
@@ -218,6 +226,10 @@ exports[`PageView component should display header left and right 1`] = `
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   headerLeft="page title"
   headerRight="right side actions"
@@ -243,10 +255,11 @@ exports[`PageView component should display header left and right 1`] = `
                 className="euiPageHeader euiPageHeader--responsive endpoint-header"
               >
                 <EuiPageHeaderSection
+                  className="endpoint-header-leftSection"
                   data-test-subj="pageViewHeaderLeft"
                 >
                   <div
-                    className="euiPageHeaderSection"
+                    className="euiPageHeaderSection endpoint-header-leftSection"
                     data-test-subj="pageViewHeaderLeft"
                   >
                     <PageViewHeaderTitle>
@@ -331,6 +344,10 @@ exports[`PageView component should display only body if not header props used 1`
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   viewType="list"
 >
@@ -403,6 +420,10 @@ exports[`PageView component should display only header left 1`] = `
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   headerLeft="page title"
   viewType="list"
@@ -427,10 +448,11 @@ exports[`PageView component should display only header left 1`] = `
                 className="euiPageHeader euiPageHeader--responsive endpoint-header"
               >
                 <EuiPageHeaderSection
+                  className="endpoint-header-leftSection"
                   data-test-subj="pageViewHeaderLeft"
                 >
                   <div
-                    className="euiPageHeaderSection"
+                    className="euiPageHeaderSection endpoint-header-leftSection"
                     data-test-subj="pageViewHeaderLeft"
                   >
                     <PageViewHeaderTitle>
@@ -505,6 +527,10 @@ exports[`PageView component should display only header right but include an empt
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   headerRight="right side actions"
   viewType="list"
@@ -529,10 +555,11 @@ exports[`PageView component should display only header right but include an empt
                 className="euiPageHeader euiPageHeader--responsive endpoint-header"
               >
                 <EuiPageHeaderSection
+                  className="endpoint-header-leftSection"
                   data-test-subj="pageViewHeaderLeft"
                 >
                   <div
-                    className="euiPageHeaderSection"
+                    className="euiPageHeaderSection endpoint-header-leftSection"
                     data-test-subj="pageViewHeaderLeft"
                   />
                 </EuiPageHeaderSection>
@@ -604,6 +631,10 @@ exports[`PageView component should pass through EuiPage props 1`] = `
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   aria-label="test-aria-label-here"
   className="test-class-name-here"
@@ -693,6 +724,10 @@ exports[`PageView component should use custom element for header left and not wr
   margin-left: 12px;
 }
 
+.c0 .endpoint-header-leftSection {
+  overflow: hidden;
+}
+
 <PageView
   headerLeft={
     <p>
@@ -721,10 +756,11 @@ exports[`PageView component should use custom element for header left and not wr
                 className="euiPageHeader euiPageHeader--responsive endpoint-header"
               >
                 <EuiPageHeaderSection
+                  className="endpoint-header-leftSection"
                   data-test-subj="pageViewHeaderLeft"
                 >
                   <div
-                    className="euiPageHeaderSection"
+                    className="euiPageHeaderSection endpoint-header-leftSection"
                     data-test-subj="pageViewHeaderLeft"
                   >
                     <p>

x-pack/plugins/security_solution/public/common/components/endpoint/page_view.tsx

@@ -17,6 +17,7 @@ import {
   EuiTab,
   EuiTabs,
   EuiTitle,
+  EuiTitleProps,
 } from '@elastic/eui';
 import React, { memo, MouseEventHandler, ReactNode, useMemo } from 'react';
 import styled from 'styled-components';
@@ -45,6 +46,9 @@ const StyledEuiPage = styled(EuiPage)`
   .endpoint-navTabs {
     margin-left: ${(props) => props.theme.eui.euiSizeM};
   }
+  .endpoint-header-leftSection {
+    overflow: hidden;
+  }
 `;
 
 const isStringOrNumber = /(string|number)/;
@@ -54,13 +58,15 @@ const isStringOrNumber = /(string|number)/;
  * Can be used when wanting to customize the `headerLeft` value but still use the standard
  * title component
  */
-export const PageViewHeaderTitle = memo<{ children: ReactNode }>(({ children }) => {
-  return (
-    <EuiTitle size="l">
-      <h1 data-test-subj="pageViewHeaderLeftTitle">{children}</h1>
-    </EuiTitle>
-  );
-});
+export const PageViewHeaderTitle = memo<Omit<EuiTitleProps, 'children'> & { children: ReactNode }>(
+  ({ children, size = 'l', ...otherProps }) => {
+    return (
+      <EuiTitle {...otherProps} size={size}>
+        <h1 data-test-subj="pageViewHeaderLeftTitle">{children}</h1>
+      </EuiTitle>
+    );
+  }
+);
 
 PageViewHeaderTitle.displayName = 'PageViewHeaderTitle';
 
@@ -135,7 +141,10 @@ export const PageView = memo<PageViewProps>(
         <EuiPageBody>
           {(headerLeft || headerRight) && (
             <EuiPageHeader className="endpoint-header">
-              <EuiPageHeaderSection data-test-subj="pageViewHeaderLeft">
+              <EuiPageHeaderSection
+                className="endpoint-header-leftSection"
+                data-test-subj="pageViewHeaderLeft"
+              >
                 {isStringOrNumber.test(typeof headerLeft) ? (
                   <PageViewHeaderTitle>{headerLeft}</PageViewHeaderTitle>
                 ) : (

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx

@@ -168,7 +168,7 @@ export const PolicyDetails = React.memo(() => {
           defaultMessage="Back to policy list"
         />
       </EuiButtonEmpty>
-      <PageViewHeaderTitle>{policyItem.name}</PageViewHeaderTitle>
+      <PageViewHeaderTitle className="eui-textTruncate">{policyItem.name}</PageViewHeaderTitle>
     </div>
   );