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 ( +
+ {label} +
+ ); + }, [label, labelClasses]); const onClickSidebarInner = useOnClickThread(sidebarThreadInfo); @@ -84,23 +93,14 @@ ); }, [reactions, onClickReactions]); - const isLeft = positioning === 'left'; - const labelClasses = classNames({ - [css.messageLabel]: true, - [css.messageLabelLeft]: isLeft, - [css.messageLabelRight]: !isLeft, - [css.onlyMessageLabel]: !sidebarItem && !reactionsList, - }); - const editedLabel = React.useMemo(() => { - if (!label) { - return null; - } - return ( -
- {label} -
- ); - }, [label, labelClasses]); + const containerClasses = classNames([ + css.inlineEngagementContainer, + { + [css.leftContainer]: positioning === 'left', + [css.centerContainer]: positioning === 'center', + [css.rightContainer]: positioning === 'right', + }, + ]); let body; if (isLeft) {