From 9adff321877343633c7d8385fcc9facb71d99199 Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Wed, 17 Feb 2021 15:42:55 -0800
Subject: [PATCH] Truncate long integration names nicely #85404

---
 .../agent_details/agent_details_integrations.tsx   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
index d8beabab67ef14..d71fb8be5f9cf4 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
@@ -27,8 +27,7 @@ import { displayInputType, getLogsQueryByInputType } from './input_type_utils';
 
 const StyledEuiAccordion = styled(EuiAccordion)`
   .ingest-integration-title-button {
-    padding: ${(props) => props.theme.eui.paddingSizes.m}
-      ${(props) => props.theme.eui.paddingSizes.m};
+    padding: ${(props) => props.theme.eui.paddingSizes.m};
   }
 
   &.euiAccordion-isOpen .ingest-integration-title-button {
@@ -38,6 +37,10 @@ const StyledEuiAccordion = styled(EuiAccordion)`
   .euiTableRow:last-child .euiTableRowCell {
     border-bottom: none;
   }
+
+  .euiIEFlexWrapFix {
+    min-width: 0;
+  }
 `;
 
 const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
@@ -46,11 +49,11 @@ const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
   children,
 }) => {
   return (
-    <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
+    <EuiPanel paddingSize="none">
       <StyledEuiAccordion
         id={id}
         arrowDisplay="right"
-        buttonClassName={'ingest-integration-title-button'}
+        buttonClassName="ingest-integration-title-button"
         buttonContent={title}
       >
         {children}
@@ -128,8 +131,9 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
                   <PackageIcon size="l" packageName="default" version="0" />
                 )}
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
+              <EuiFlexItem className="eui-textTruncate">
                 <EuiLink
+                  className="eui-textTruncate"
                   href={getHref('edit_integration', {
                     policyId: agentPolicy.id,
                     packagePolicyId: packagePolicy.id,