[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

Author: paul-tavares

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

@@ -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/common/components/endpoint/page_view.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>
   );