From d6e2080b62d2b3022ffc36a10e2f668126eac563 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 16 Sep 2021 08:22:44 -0400
Subject: [PATCH] fixed big header (#112380) (#112393)

Co-authored-by: juliaElastic <90178898+juliaElastic@users.noreply.github.com>
---
 .../sections/epm/screens/detail/index.tsx             | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
index 26869f8fea574..f0630f89c8984 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
@@ -79,6 +79,13 @@ const FlexItemWithMinWidth = styled(EuiFlexItem)`
   min-width: 0px;
 `;
 
+// to limit size of iconpanel, making the header too big
+const FlexItemWithMaxHeight = styled(EuiFlexItem)`
+  @media (min-width: 768px) {
+    max-height: 60px;
+  }
+`;
+
 function Breadcrumbs({ packageTitle }: { packageTitle: string }) {
   useBreadcrumbs('integration_details_overview', { pkgTitle: packageTitle });
   return null;
@@ -173,7 +180,7 @@ export function Detail() {
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="l">
-            <EuiFlexItem grow={false}>
+            <FlexItemWithMaxHeight grow={false}>
               {isLoading || !packageInfo ? (
                 <LoadingIconPanel />
               ) : (
@@ -184,7 +191,7 @@ export function Detail() {
                   icons={integrationInfo?.icons || packageInfo.icons}
                 />
               )}
-            </EuiFlexItem>
+            </FlexItemWithMaxHeight>
             <EuiFlexItem>
               <EuiFlexGroup alignItems="center" gutterSize="m">
                 <FlexItemWithMinWidth grow={false}>