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 6e989b6c9f7bd4..0cad0b4d487d0e 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
@@ -21,26 +21,30 @@ import { useLink } from '../../../../../hooks';
import { PackageIcon } from '../../../../../components';
import { displayInputType, getLogsQueryByInputType } from './input_type_utils';
-const StyledCollapsablePanel = styled(EuiPanel).attrs((props) => ({
- paddingSize: 'none',
-}))`
- .euiAccordion__triggerWrapper {
- border-bottom: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
+const StyledEuiAccordion = styled(EuiAccordion)`
+ .ingest-integration-title-button {
padding: ${(props) => props.theme.eui.paddingSizes.m}
${(props) => props.theme.eui.paddingSizes.m};
- }
- .euiAccordion__childWrapper {
- overflow: visible;
+ border-bottom: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
}
`;
-const CollapsablePanel: React.FC<{ title: React.ReactNode }> = ({ title, children }) => {
+const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
+ id,
+ title,
+ children,
+}) => {
return (
-
-
+
+
{children}
-
-
+
+
);
};
@@ -92,6 +96,7 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
return (