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;