diff --git a/web/chat/inline-engagement.css b/web/chat/inline-engagement.css
--- a/web/chat/inline-engagement.css
+++ b/web/chat/inline-engagement.css
@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
 }
 div.centerContainer {
   justify-content: center;
@@ -14,15 +16,15 @@
   margin-right: 80px;
 }
 div.rightContainer {
-  justify-content: flex-end;
   position: relative;
   top: -10px;
   right: 33px;
   margin-left: 80px;
+  flex-direction: row-reverse;
 }
 
 a.sidebarContainer,
-a.reactionsContainer {
+a.reactionContainer {
   background: var(--inline-engagement-bg);
   color: var(--inline-engagement-color);
   font-size: var(--s-font-14);
@@ -36,7 +38,7 @@
 }
 
 a.sidebarContainer:hover,
-a.reactionsContainer:hover {
+a.reactionContainer:hover {
   background: var(--inline-engagement-bg-hover);
 }
 
@@ -64,10 +66,8 @@
 
 div.messageLabelLeft {
   margin-left: 8px;
-  margin-right: 4px;
 }
 
 div.messageLabelRight {
   margin-right: 8px;
-  margin-left: 4px;
 }
diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js
--- a/web/chat/inline-engagement.react.js
+++ b/web/chat/inline-engagement.react.js
@@ -6,7 +6,6 @@
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { getInlineEngagementSidebarText } from 'lib/shared/inline-engagement-utils.js';
-import { stringForReactionList } from 'lib/shared/reaction-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './inline-engagement.css';
@@ -23,7 +22,6 @@
 function InlineEngagement(props: Props): React.Node {
   const { sidebarThreadInfo, reactions, positioning, label } = props;
   const { pushModal, popModal } = useModalContext();
-  const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo);
 
   const isLeft = positioning === 'left';
 
@@ -53,6 +51,8 @@
     [popModal, onClickSidebarInner],
   );
 
+  const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo);
+
   const sidebarItem = React.useMemo(() => {
     if (!sidebarThreadInfo || !repliesText) {
       return null;
@@ -66,7 +66,7 @@
     );
   }, [sidebarThreadInfo, repliesText, onClickSidebar]);
 
-  const onClickReactions = React.useCallback(
+  const onClickReaction = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
       if (!reactions) {
@@ -84,14 +84,20 @@
       return null;
     }
 
-    const reactionText = stringForReactionList(reactions);
-
-    return (
-      <a onClick={onClickReactions} className={css.reactionsContainer}>
-        {reactionText}
-      </a>
-    );
-  }, [reactions, onClickReactions]);
+    return Object.keys(reactions).map(reaction => {
+      const numOfReacts = reactions[reaction].users.length;
+
+      return (
+        <a
+          onClick={onClickReaction}
+          className={css.reactionContainer}
+          key={reaction}
+        >
+          {`${reaction} ${numOfReacts}`}
+        </a>
+      );
+    });
+  }, [reactions, onClickReaction]);
 
   const containerClasses = classNames([
     css.inlineEngagementContainer,
@@ -102,25 +108,13 @@
     },
   ]);
 
-  let body;
-  if (isLeft) {
-    body = (
-      <>
-        {editedLabel}
-        {sidebarItem}
-        {reactionsList}
-      </>
-    );
-  } else {
-    body = (
-      <>
-        {sidebarItem}
-        {reactionsList}
-        {editedLabel}
-      </>
-    );
-  }
-  return <div className={containerClasses}>{body}</div>;
+  return (
+    <div className={containerClasses}>
+      {editedLabel}
+      {sidebarItem}
+      {reactionsList}
+    </div>
+  );
 }
 
 export default InlineEngagement;