From 0070dfa9410042337a67a8dc3f93216c063f4f5a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 15 Apr 2023 13:51:50 +0200
Subject: [PATCH] Reactions: Maximum width limitation (#2990)

---
 src/components/middle/message/Message.tsx    | 5 +++++
 src/components/middle/message/Reactions.scss | 1 +
 2 files changed, 6 insertions(+)

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<OwnProps & StateProps> = ({
   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);