Message: Maximum width limitation for outside reactions (#2783)

src/components/middle/message/Message.tsx

@@ -262,6 +262,7 @@ const APPENDIX_NOT_OWN = { __html: '<svg width="9" height="20" xmlns="http://www
 const APPEARANCE_DELAY = 10;
 const NO_MEDIA_CORNERS_THRESHOLD = 18;
 const QUICK_REACTION_SIZE = 1.75 * REM;
+const EXTRA_SPACE_FOR_REACTIONS = 2.25 * REM;
 const BOTTOM_FOCUS_SCROLL_THRESHOLD = 5;
 const THROTTLE_MS = 300;
 
@@ -655,6 +656,7 @@ const Message: FC<OwnProps & StateProps> = ({
 
   let style = '';
   let calculatedWidth;
+  let reactionsMaxWidth;
   let noMediaCorners = false;
   const albumLayout = useMemo(() => {
     return isAlbum
@@ -704,6 +706,7 @@ const Message: FC<OwnProps & StateProps> = ({
 
   if (calculatedWidth) {
     style = `width: ${calculatedWidth + extraPadding}px`;
+    reactionsMaxWidth = calculatedWidth + EXTRA_SPACE_FOR_REACTIONS;
   }
 
   const signature = (isChannel && message.postAuthorTitle)
@@ -1233,6 +1236,7 @@ const Message: FC<OwnProps & StateProps> = ({
           <Reactions
             message={reactionMessage!}
             isOutside
+            maxWidth={reactionsMaxWidth}
             activeReactions={activeReactions}
             availableReactions={availableReactions}
             genericEffects={genericEffects}

src/components/middle/message/Reactions.tsx

@@ -15,6 +15,7 @@ import './Reactions.scss';
 type OwnProps = {
   message: ApiMessage;
   isOutside?: boolean;
+  maxWidth?: number;
   activeReactions?: ActiveReaction[];
   availableReactions?: ApiAvailableReaction[];
   metaChildren?: React.ReactNode;
@@ -28,6 +29,7 @@ const MAX_RECENT_AVATARS = 3;
 const Reactions: FC<OwnProps> = ({
   message,
   isOutside,
+  maxWidth,
   activeReactions,
   availableReactions,
   metaChildren,
@@ -40,7 +42,10 @@ const Reactions: FC<OwnProps> = ({
   ), [message]);
 
   return (
-    <div className={buildClassName('Reactions', isOutside && 'is-outside')}>
+    <div
+      className={buildClassName('Reactions', isOutside && 'is-outside')}
+      style={maxWidth ? `max-width: ${maxWidth}px` : undefined}
+    >
       {message.reactions!.results.map((reaction) => (
         <ReactionButton
           key={getReactionUniqueKey(reaction.reaction)}