Using the same logic for alignment

packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart

@@ -106,19 +106,16 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
     final roughSentenceSize = widget.message
         .roughMessageSize(widget.messageTheme.messageTextStyle?.fontSize);
 
+    final fontSize = widget.messageTheme.messageTextStyle?.fontSize;
+
     print('roughSentenceSize $roughSentenceSize');
     print('roughMaxSize $roughMaxSize');
 
-    final divFactor = widget.message.attachments.isNotEmpty
-        ? 1
-        : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
-
     final streamChatThemeData = StreamChatTheme.of(context);
 
     final numberOfReactions =
         StreamChatConfiguration.of(context).reactionIcons.length;
-    final shiftFactor =
+
-        numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0;
     final channel = StreamChannel.of(context).channel;
 
     final child = Center(
@@ -139,9 +136,10 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                         calculateReactionsHorizontalAlignmentValue(
                           user,
                           widget.message,
-                          divFactor,
-                          shiftFactor,
                           constraints,
+                          roughMaxSize,
+                          fontSize,
+                          numberOfReactions,
                         ),
                         0,
                       ),

packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart

@@ -2,6 +2,7 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/message_widget/reactions/reaction_bubble.dart';
+import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_align.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// {@template streamMessageReactionsModal}
@@ -45,19 +46,10 @@ class StreamMessageReactionsModal extends StatelessWidget {
 
     final hasReactionPermission =
         _userPermissions.contains(PermissionType.sendReaction);
-
     final roughMaxSize = size.width * 2 / 3;
-
+    final fontSize = messageTheme.messageTextStyle?.fontSize;
-    final roughSentenceSize =
-        message.roughMessageSize(messageTheme.messageTextStyle?.fontSize);
-    final divFactor = message.attachments.isNotEmpty
-        ? 1
-        : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
-
     final numberOfReactions =
         StreamChatConfiguration.of(context).reactionIcons.length;
-    final shiftFactor =
-        numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0;
 
     final child = Center(
       child: SingleChildScrollView(
@@ -69,20 +61,25 @@ class StreamMessageReactionsModal extends StatelessWidget {
             children: <Widget>[
               if ((showReactions ?? hasReactionPermission) &&
                   (message.status == MessageSendingStatus.sent))
-                Align(
+                LayoutBuilder(
-                  alignment: Alignment(
+                  builder: (context, constraints) {
-                    user!.id == message.user!.id
+                    return Align(
-                        ? (divFactor >= 1.0
+                      alignment: Alignment(
-                            ? -0.2 - shiftFactor
+                        calculateReactionsHorizontalAlignmentValue(
-                            : (1.2 - divFactor))
+                          user,
-                        : (divFactor >= 1.0
+                          message,
-                            ? shiftFactor + 0.2
+                          constraints,
-                            : -(1.2 - divFactor)),
+                          roughMaxSize,
-                    0,
+                          fontSize,
-                  ),
+                          numberOfReactions,
-                  child: StreamReactionPicker(
+                        ),
-                    message: message,
+                        0,
-                  ),
+                      ),
+                      child: StreamReactionPicker(
+                        message: message,
+                      ),
+                    );
+                  },
                 ),
               const SizedBox(height: 10),
               IgnorePointer(

packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart

@@ -3,17 +3,25 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// Document here!!
 double calculateReactionsHorizontalAlignmentValue(
-    User? user,
+  User? user,
-    Message message,
+  Message message,
-    num divFactor,
+  BoxConstraints constraints,
-    double shiftFactor,
+  double maxSize,
-    BoxConstraints constraints,
+  double? fontSize,
-    ) {
+  int reactionsCount,
+) {
   var result = 0.0;
 
+  final shiftFactor = reactionsCount < 5 ? (5 - reactionsCount) * 0.1 : 0.0;
   final maxWidth = constraints.maxWidth;
   final maxHeight = constraints.maxHeight;
 
+  final roughSentenceSize = message.roughMessageSize(fontSize);
+
+  final divFactor = message.attachments.isNotEmpty
+      ? 1
+      : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize));
+
   print('INFO - max width: $maxWidth. '
       'maxHeight: $maxHeight '
       'shiftFactor: $shiftFactor '
@@ -48,6 +56,8 @@ double calculateReactionsHorizontalAlignmentValue(
   // Hacky!!! Needs improvement!!!
   if (result > 1.0) {
     return 1;
+  } else if (result < -1.0) {
+    return -1;
   } else {
     return result;
   }