From 2fd518535478f1bfd64b3bb150d509ba9c66761a Mon Sep 17 00:00:00 2001
From: Elay Aharoni <elayaha@gmail.com>
Date: Mon, 24 Mar 2025 18:28:41 +0200
Subject: [PATCH] fix grid in host discovery alignment

Signed-off-by: Elay Aharoni <elayaha@gmail.com>
---
 .../hosts/HostPropertyValidationPopover.tsx        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/libs/ui-lib/lib/common/components/hosts/HostPropertyValidationPopover.tsx b/libs/ui-lib/lib/common/components/hosts/HostPropertyValidationPopover.tsx
index f1314fa925..76eac8ef46 100644
--- a/libs/ui-lib/lib/common/components/hosts/HostPropertyValidationPopover.tsx
+++ b/libs/ui-lib/lib/common/components/hosts/HostPropertyValidationPopover.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
@@ -60,21 +60,27 @@ const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps
     if (showFailure && validation.status === 'failure') {
       return (
         <ValidationPopover validation={validation} actions={failureActions}>
-          <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showPending && validation.status === 'pending') {
       return (
         <ValidationPopover validation={validation} actions={pendingActions}>
-          <PendingIcon /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PendingIcon /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showSuccess && validation.status === 'success') {
       return (
         <>
-          <CheckCircleIcon color={successColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <CheckCircleIcon color={successColor.value} /> {children}
+          </Flex>
         </>
       );
     }