Client:InvitePanel Fixed the location of the error icon

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -440,14 +440,6 @@ StyledCrossIcon.defaultProps = { theme: Base };
 
 const StyledDeleteIcon = styled(DeleteIcon)`
   cursor: pointer;
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          margin-right: auto;
-        `
-      : css`
-          margin-left: auto;
-        `}
 
   ${iconStyles}
 `;
@@ -584,6 +576,14 @@ const StyledCrossIconMobile = styled(CrossIconMobile)`
 `;
 
 StyledCrossIcon.defaultProps = { theme: Base };
+
+const ErrorWrapper = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+  margin-inline-start: auto;
+`;
+
 export {
   StyledBlock,
   StyledHeading,
@@ -611,4 +611,5 @@ export {
   StyledControlContainer,
   StyledCrossIconMobile,
   StyledInviteUserBody,
+  ErrorWrapper,
 };

packages/client/src/components/panels/InvitePanel/sub-components/Item.js

@@ -49,6 +49,7 @@ import {
   StyledHelpButton,
   StyledDeleteIcon,
   StyledInviteUserBody,
+  ErrorWrapper,
 } from "../StyledInvitePanel";
 import { filterGroupRoleOptions, filterUserRoleOptions } from "SRC_DIR/helpers";
 import AccessSelector from "../../../AccessSelector";
@@ -229,7 +230,7 @@ const Item = ({
       </StyledInviteUserBody>
 
       {hasError ? (
-        <>
+        <ErrorWrapper>
           <StyledHelpButton
             iconName={InfoEditReactSvgUrl}
             displayType="auto"
@@ -244,7 +245,7 @@ const Item = ({
             size="medium"
             onClick={removeItem}
           />
-        </>
+        </ErrorWrapper>
       ) : (
         <>
           {warning && (