Web:Client:Fixed overlay of user type hover styles on the user badge when opening the info panel.

packages/client/src/pages/Home/Section/AccountsBody/Badges.js

@@ -20,6 +20,21 @@ const StyledBadgesContainer = styled.div`
   display: flex;
 
   align-items: center;
+
+  ${(props) =>
+    props.infoPanelVisible &&
+    css`
+      .accounts-badge:last-child {
+        ${(props) =>
+          props.theme.interfaceDirection === "rtl"
+            ? css`
+                margin-left: 12px;
+              `
+            : css`
+                margin-right: 12px;
+              `}
+      }
+    `}
 `;
 
 const StyledPaidBadge = styled(Badge)`
@@ -52,7 +67,7 @@ const Badges = ({
   withoutPaid,
   isPaid = false,
   filter,
-
+  infoPanelVisible,
   isSSO = false,
 }) => {
   const navigate = useNavigate();
@@ -74,9 +89,13 @@ const Badges = ({
   };
 
   return (
-    <StyledBadgesContainer className="badges additional-badges">
+    <StyledBadgesContainer
+      className="badges additional-badges"
+      infoPanelVisible={infoPanelVisible}
+    >
       {isSSO && (
         <Badge
+          className="accounts-badge"
           label={SSO_LABEL}
           color={"#FFFFFF"}
           backgroundColor="#22C386"
@@ -89,7 +108,7 @@ const Badges = ({
       )}
       {!withoutPaid && isPaid && (
         <StyledPaidBadge
-          className="paid-badge"
+          className="paid-badge accounts-badge"
           label={t("Paid")}
           backgroundColor={"#EDC409"}
           fontSize={"9px"}
@@ -101,10 +120,16 @@ const Badges = ({
         />
       )}
       {statusType === "pending" && (
-        <StyledSendClockIcon className="pending-badge" size="small" />
+        <StyledSendClockIcon
+          className="pending-badge accounts-badge"
+          size="small"
+        />
       )}
       {statusType === "disabled" && (
-        <StyledCatalogSpamIcon className="disabled-badge" size="small" />
+        <StyledCatalogSpamIcon
+          className="disabled-badge accounts-badge"
+          size="small"
+        />
       )}
     </StyledBadgesContainer>
   );

packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js

@@ -177,6 +177,7 @@ const Table = ({
             itemIndex={index}
             typeAccountsColumnIsEnabled={typeAccountsColumnIsEnabled}
             emailAccountsColumnIsEnabled={emailAccountsColumnIsEnabled}
+            infoPanelVisible={infoPanelVisible}
           />
         ))}
       </TableBody>
@@ -193,7 +194,7 @@ export default inject(
     accessRightsStore,
     infoPanelStore,
     userStore,
-    tableStore
+    tableStore,
   }) => {
     const {
       usersStore,
@@ -234,5 +235,5 @@ export default inject(
       typeAccountsColumnIsEnabled,
       emailAccountsColumnIsEnabled,
     };
-  }
+  },
 )(observer(Table));

packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js

@@ -232,6 +232,7 @@ const PeopleTableRow = (props) => {
     standalone,
     typeAccountsColumnIsEnabled,
     emailAccountsColumnIsEnabled,
+    infoPanelVisible,
   } = props;
 
   const {
@@ -454,7 +455,12 @@ const PeopleTableRow = (props) => {
                 ? displayName
                 : email}
           </Link>
-          <Badges statusType={statusType} isPaid={isPaidUser} isSSO={isSSO} />
+          <Badges
+            statusType={statusType}
+            isPaid={isPaidUser}
+            isSSO={isSSO}
+            infoPanelVisible={infoPanelVisible}
+          />
         </TableCell>
 
         {typeAccountsColumnIsEnabled ? (