fix(ChatMessage): adjust styles for Teams theme

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix allow `Text` component when rendered as div to behave as block element in Teams theme @mnajdova ([#940](https://github.com/stardust-ui/react/pull/940))
 - Fix font-based `Icon` styles in Teams theme @kuzhelov ([#976](https://github.com/stardust-ui/react/pull/976))
 - Refactor the `ListItem` component to use the `Flex` components instead of `ItemLayout` @mnajdova ([#886](https://github.com/stardust-ui/react/pull/886))
+- Fixed distance of the `content` and `reactionGroup` from the `badge` in the `ChatMessage` component for Teams theme @mnajdova ([#986](https://github.com/stardust-ui/react/pull/986))
 
 ### Features
 - Add `Reaction` and `ReactionGroup` components @mnajdova ([#959](https://github.com/stardust-ui/react/pull/959))

packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts

@@ -95,6 +95,10 @@ const chatMessageStyles: ComponentSlotStylesInput<
       color: v.contentFocusOutlineColor,
       textDecoration: 'underline',
     },
+    ...(p.badge &&
+      p.badgePosition === 'end' && {
+        marginRight: pxToRem(4),
+      }),
   }),
   badge: ({ props: p, variables: v }) => {
     const sidePosition = p.badgePosition === 'start' ? 'left' : 'right'
@@ -113,8 +117,12 @@ const chatMessageStyles: ComponentSlotStylesInput<
       transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)',
     }
   },
-  reactionGroup: ({ variables: v }) => ({
+  reactionGroup: ({ props: p, variables: v }) => ({
     marginLeft: v.reactionGroupMarginLeft,
+    ...(p.badge &&
+      p.badgePosition === 'end' && {
+        marginRight: pxToRem(2),
+      }),
     float: 'right',
   }),
 }