[issues-5649] fix hover over for entity cards (#5679)

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx

@@ -120,7 +120,10 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
   }, [feed]);
 
   return (
-    <div className={classNames(className, 'hover:tw-bg-gray-100')}>
+    <div
+      className={classNames(className, 'hover:tw-bg-gray-100', {
+        'tw-bg-gray-100': visible,
+      })}>
       <Popover
         destroyTooltipOnHide
         align={{ targetOffset: [0, -35] }}
@@ -137,6 +140,7 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
             onReply={onReply}
           />
         }
+        key="reaction-options-popover"
         overlayClassName="ant-popover-feed"
         placement="topRight"
         trigger="hover"

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx

@@ -133,6 +133,7 @@ const PopoverContent: FC<Props> = ({
   return (
     <div className="tw-flex tw-gap-x-2">
       <Popover
+        destroyTooltipOnHide
         align={{ targetOffset: [0, -10] }}
         content={reactionList}
         overlayClassName="ant-popover-feed-reactions"
@@ -146,7 +147,7 @@ const PopoverContent: FC<Props> = ({
             alt="add-reaction"
             icon={Icons.REACTION}
             title="Add reactions"
-            width="16px"
+            width="20px"
           />
         </button>
       </Popover>
@@ -156,7 +157,7 @@ const PopoverContent: FC<Props> = ({
           alt="add-reply"
           icon={Icons.ADD_REPLY}
           title="Reply"
-          width="16px"
+          width="20px"
         />
       </button>
 
@@ -166,7 +167,7 @@ const PopoverContent: FC<Props> = ({
             alt="delete-reply"
             icon={Icons.FEED_DELETE}
             title="Delete"
-            width="16px"
+            width="20px"
           />
         </button>
       ) : null}

openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx

@@ -61,7 +61,12 @@ const Emoji = ({ reaction, reactionList, onReactionSelect }) => {
   );
 
   return (
-    <Popover content={popoverContent} trigger="hover" zIndex={9999}>
+    <Popover
+      destroyTooltipOnHide
+      content={popoverContent}
+      key="reaction-detail-popover"
+      trigger="hover"
+      zIndex={9999}>
       <Button
         className={classNames('ant-btn-reaction tw-mr-1', {
           'ant-btn-isReacted': isReacted,

openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx

@@ -26,7 +26,7 @@ interface PageLayoutProp {
 
 export const leftPanelAntCardStyle = {
   border: '1px rgb(221, 227, 234) solid',
-  borderRadius: '8px',
+  borderRadius: '4px',
   boxShadow: '1px 1px 8px rgb(0 0 0 / 6%)',
   marginRight: '4px',
   marginLeft: '4px',

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -1055,7 +1055,7 @@ code {
 .ant-btn-popover-reaction {
   height: auto;
   padding: 0 8px;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   background-color: transparent;
 }