reducing code duplication

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

@@ -100,6 +100,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
     final mediaQueryData = MediaQuery.of(context);
     final size = mediaQueryData.size;
     final user = StreamChat.of(context).currentUser;
+    final orientation = mediaQueryData.orientation;
 
     final roughMaxSize = size.width * 2 / 3;
 
@@ -140,6 +141,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                           roughMaxSize,
                           fontSize,
                           numberOfReactions,
+                          orientation,
                         ),
                         0,
                       ),

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

@@ -43,6 +43,7 @@ class StreamMessageReactionsModal extends StatelessWidget {
     final size = MediaQuery.of(context).size;
     final user = StreamChat.of(context).currentUser;
     final _userPermissions = StreamChannel.of(context).channel.ownCapabilities;
+    final orientation = MediaQuery.of(context).orientation;
 
     final hasReactionPermission =
         _userPermissions.contains(PermissionType.sendReaction);
@@ -72,6 +73,7 @@ class StreamMessageReactionsModal extends StatelessWidget {
                           roughMaxSize,
                           fontSize,
                           numberOfReactions,
+                          orientation,
                         ),
                         0,
                       ),

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

@@ -9,9 +9,8 @@ double calculateReactionsHorizontalAlignmentValue(
   double maxSize,
   double? fontSize,
   int reactionsCount,
+  Orientation orientation,
 ) {
-  var result = 0.0;
-
   final shiftFactor = reactionsCount < 5 ? (5 - reactionsCount) * 0.1 : 0.0;
   final maxWidth = constraints.maxWidth;
   final maxHeight = constraints.maxHeight;
@@ -22,11 +21,42 @@ double calculateReactionsHorizontalAlignmentValue(
       ? 1
       : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize));
 
+  if (orientation == Orientation.portrait) {
+    return _portraitAlign(
+      user,
+      message,
+      maxWidth,
+      maxHeight,
+      shiftFactor,
+      divFactor,
+    );
+  } else {
+    return _landScapeAlign(
+      user,
+      message,
+      maxWidth,
+      maxHeight,
+      shiftFactor,
+      divFactor,
+    );
+  }
+}
+
+double _portraitAlign(
+  User? user,
+  Message message,
+  double maxWidth,
+  double maxHeight,
+  double shiftFactor,
+  num divFactor,
+) {
   print('INFO - max width: $maxWidth. '
       'maxHeight: $maxHeight '
       'shiftFactor: $shiftFactor '
       'divFactor: $divFactor');
 
+  var result = 0.0;
+
   if (user?.id == message.user?.id) {
     if (divFactor >= 1.0) {
       /*
@@ -49,11 +79,64 @@ double calculateReactionsHorizontalAlignmentValue(
     }
   }
 
-  print('INFO - result: $result');
+  print('INFO - result portrait: $result');
 
   // Ensure reactions don't get pushed past the edge of the screen.
   //
-  // Hacky!!! Needs improvement!!!
+  // This happens if divFactor is really big. When this happens, we can simply
+  // move the model all the way to the end of screen.
+  if (result > 1.0) {
+    return 1;
+  } else if (result < -1.0) {
+    return -1;
+  } else {
+    return result;
+  }
+}
+
+double _landScapeAlign(
+  User? user,
+  Message message,
+  double maxWidth,
+  double maxHeight,
+  double shiftFactor,
+  num divFactor,
+) {
+  var result = 0.0;
+
+  print('INFO - max width: $maxWidth. '
+      'maxHeight: $maxHeight '
+      'shiftFactor: $shiftFactor '
+      'divFactor: $divFactor');
+
+  if (user?.id == message.user?.id) {
+    if (divFactor >= 1.7) {
+      /*
+         This is an empiric value. This number tries to approximate all the
+         offset necessary for the position of reaction look the best way
+         possible.
+         */
+      const constant = 3000;
+
+      result = shiftFactor - maxWidth / constant;
+    } else {
+      // Small messages, it is simpler to align then.
+      result = 1 - divFactor * 0.6;
+    }
+  } else {
+    if (divFactor >= 1.7) {
+      result = shiftFactor + 0.2;
+    } else {
+      result = -(1.2 - divFactor);
+    }
+  }
+
+  print('INFO - result landscape: $result');
+
+  // Ensure reactions don't get pushed past the edge of the screen.
+  //
+  // This happens if divFactor is really big. When this happens, we can simply
+  // move the model all the way to the end of screen.
   if (result > 1.0) {
     return 1;
   } else if (result < -1.0) {