From e16495792f59c7e1eb4e539f63988081f9986e0d Mon Sep 17 00:00:00 2001
From: Jack <wang.zizhou@outlook.com>
Date: Wed, 6 Oct 2021 10:58:04 -0400
Subject: [PATCH] Fix long agent policy name accessibility in add/edit
 integration (#113828)

---
 .../components/layout.tsx                           | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/layout.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/layout.tsx
index 59498325bf91..1de37912b05c 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/layout.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/layout.tsx
@@ -7,6 +7,7 @@
 
 import React, { memo, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
+import styled from 'styled-components';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -23,6 +24,14 @@ import type { AgentPolicy, PackageInfo, RegistryPolicyTemplate } from '../../../
 import { PackageIcon } from '../../../../components';
 import type { EditPackagePolicyFrom } from '../types';
 
+const AgentPolicyName = styled(EuiDescriptionListDescription)`
+  margin-left: auto;
+  max-width: 250px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
 export const CreatePackagePolicyPageLayout: React.FunctionComponent<{
   from: EditPackagePolicyFrom;
   cancelUrl: string;
@@ -209,9 +218,9 @@ export const CreatePackagePolicyPageLayout: React.FunctionComponent<{
               defaultMessage="Agent policy"
             />
           </EuiDescriptionListTitle>
-          <EuiDescriptionListDescription className="eui-textBreakWord">
+          <AgentPolicyName className="eui-textBreakWord" title={agentPolicy?.name || '-'}>
             {agentPolicy?.name || '-'}
-          </EuiDescriptionListDescription>
+          </AgentPolicyName>
         </EuiDescriptionList>
       ) : undefined;