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 @@ -51,12 +51,15 @@ div.messageLabel { display: flex; flex-shrink: 0; + /* This is the height of the sidebar/reaction pills */ + height: 29px; } div.messageLabel > span { font-size: 12px; padding: 0 3px; color: var(--message-label-color); + align-self: center; } div.messageLabelLeft { @@ -68,7 +71,3 @@ margin-right: 12px; margin-left: 4px; } - -div.onlyMessageLabel { - margin-top: 8px; -} 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 @@ -25,14 +25,23 @@ const { pushModal, popModal } = useModalContext(); const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo); - const containerClasses = classNames([ - css.inlineEngagementContainer, - { - [css.leftContainer]: positioning === 'left', - [css.centerContainer]: positioning === 'center', - [css.rightContainer]: positioning === 'right', - }, - ]); + const isLeft = positioning === 'left'; + + const labelClasses = classNames({ + [css.messageLabel]: true, + [css.messageLabelLeft]: isLeft, + [css.messageLabelRight]: !isLeft, + }); + const editedLabel = React.useMemo(() => { + if (!label) { + return null; + } + return ( +