diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 7e516d2dd..893057ffa 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -93,6 +93,7 @@ import { import buildClassName from '../../../util/buildClassName'; import { calculateDimensionsForMessageMedia, + getStickerDimensions, REM, ROUND_VIDEO_DIMENSIONS_PX, } from '../../common/helpers/mediaDimensions'; @@ -747,6 +748,10 @@ const Message: FC = ({ if (calculatedWidth) { style = `width: ${calculatedWidth + extraPadding}px`; reactionsMaxWidth = calculatedWidth + EXTRA_SPACE_FOR_REACTIONS; + } else if (sticker) { + const { width } = getStickerDimensions(sticker, isMobile); + style = `width: ${width + extraPadding}px`; + reactionsMaxWidth = width + EXTRA_SPACE_FOR_REACTIONS; } const signature = (isChannel && message.postAuthorTitle) diff --git a/src/components/middle/message/Reactions.scss b/src/components/middle/message/Reactions.scss index 3fd4d0837..827b5cbc8 100644 --- a/src/components/middle/message/Reactions.scss +++ b/src/components/middle/message/Reactions.scss @@ -5,6 +5,7 @@ flex-wrap: wrap; margin-top: 0.25rem; overflow: visible; + max-width: calc(var(--max-width) + 2.25rem); .Button { --reaction-background: var(--color-reaction);