Truncate long integration names nicely #85404

elastic · Feb 17, 2021 · 9adff32 · 9adff32
1 parent b12bf61
commit 9adff32
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/...ections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/...ections/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,