From 11d88cd837b522eed8aafb16f6d2a9ce966259d4 Mon Sep 17 00:00:00 2001
From: jennypavlova <dzheni.pavlova@elastic.co>
Date: Tue, 12 Sep 2023 12:40:50 +0200
Subject: [PATCH] [Infra UI] Consistency in the popover styling  (#166189)

Closes #165960
## Summary

This PR sets all popups inside host view padding to size s (8px)

### Testing

- Open the host view and check the popup size (should be 8px - size s):
<img width="1303" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/b3242de6-5644-4a1d-9f10-7b9a76269848">

- Open metadata and processes message popups - they should have the same
padding size:
   - Metadata Tab

<img width="1002" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/e1c157aa-ced6-4a2e-9458-a38b99328276">

   - Overview Tab

<img width="585" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/878c1325-28af-4b16-9ec4-93a0fc620c87">

   - Processes Tab

<img width="1147" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/70dfc49f-ef1a-4786-bab4-7a3715af7f85">
---
 .../asset_details/components/metadata_explanation.tsx        | 3 +--
 .../asset_details/components/processes_explanation.tsx       | 3 +--
 .../public/components/asset_details/tabs/common/popover.tsx  | 5 +----
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/asset_details/components/metadata_explanation.tsx b/x-pack/plugins/infra/public/components/asset_details/components/metadata_explanation.tsx
index bdd77916db02f..857dc493041c1 100644
--- a/x-pack/plugins/infra/public/components/asset_details/components/metadata_explanation.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/components/metadata_explanation.tsx
@@ -21,7 +21,7 @@ const MetadataExplanationTooltipContent = React.memo(() => {
   };
 
   return (
-    <EuiText size="s" onClick={onClick} style={{ width: 200 }}>
+    <EuiText size="xs" onClick={onClick} style={{ width: 200 }}>
       <FormattedMessage
         id="xpack.infra.assetDetails.metadata.tooltip.documentationLabel"
         defaultMessage="{metadata} is populated from the last event detected for this {hostName} for the selected date period."
@@ -91,7 +91,6 @@ export const MetadataExplanationMessage = () => {
           iconSize="s"
           iconColor="subdued"
           icon="iInCircle"
-          panelPaddingSize="m"
           data-test-subj="infraAssetDetailsMetadataPopoverButton"
         >
           <MetadataExplanationTooltipContent />
diff --git a/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx b/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx
index 5f1af3f9f8a26..2cf339c2e36d8 100644
--- a/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx
@@ -22,7 +22,7 @@ const ProcessesExplanationTooltipContent = React.memo(() => {
   };
 
   return (
-    <EuiText size="s" onClick={onClick} style={{ width: 300 }}>
+    <EuiText size="xs" onClick={onClick} style={{ width: 300 }}>
       <p>
         <FormattedMessage
           id="xpack.infra.assetDetails.processes.tooltip.explanationLabel"
@@ -100,7 +100,6 @@ export const ProcessesExplanationMessage = () => {
           iconSize="s"
           iconColor="subdued"
           icon="iInCircle"
-          panelPaddingSize="m"
           data-test-subj="infraAssetDetailsProcessesPopoverButton"
         >
           <ProcessesExplanationTooltipContent />
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx
index 823f330e742a7..cec9826d00cf7 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { PanelPaddingSize } from '@elastic/eui';
 import { EuiPopover, EuiIcon, type IconType, type IconColor, type IconSize } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React from 'react';
@@ -16,20 +15,18 @@ export const Popover = ({
   icon,
   iconColor,
   iconSize,
-  panelPaddingSize,
   ...props
 }: {
   children: React.ReactNode;
   icon: IconType;
   iconColor?: IconColor;
   iconSize?: IconSize;
-  panelPaddingSize?: PanelPaddingSize;
   'data-test-subj'?: string;
 }) => {
   const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
   return (
     <EuiPopover
-      panelPaddingSize={panelPaddingSize ?? 's'}
+      panelPaddingSize="s"
       button={
         <EuiIcon
           data-test-subj={props['data-test-subj']}