Fix Message Positioning in Reaction Context Menu (#712)

* patch: maintain same message bubble location on both chatscreen and context screen

* added change to changelog

* style: improve code formatting and remove whitespace in chat widgets

* Update message top offset comment

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: simplify message position calculation by removing unused vertical adjustment

* fix: improve reaction dialog positioning by calculating from message top instead of center

* refactor: extract reaction dialog positioning logic into separate widget class

* style: improve code formatting in reactions dialog widget positioning logic

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: Quwaysim

CHANGELOG.md

@@ -16,11 +16,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed 2 users group creation when DM already exists
 - Fixed issue where keyboard covers part of the "introduce yourself" textfield.
 - Improved close reply tap area/response.
-
 - Improved haptic feedback for chat context menus.
 - Pinned the header in auth flow screens when keyboard is open for easier back navigation.
 - Fixed broken profile image upload [#701](https://github.com/parres-hq/whitenoise_flutter/pull/701)
 - Fixed double rendering issue for some messages [#654](https://github.com/parres-hq/whitenoise_flutter/pull/654)
+- Fixed message bubble jumping to another location on context screen.
 ### Security
 
 

lib/ui/chat/chat_screen.dart

@@ -355,11 +355,12 @@ class _ChatScreenState extends ConsumerState<ChatScreen> with WidgetsBindingObse
                                             groupId: widget.groupId,
                                           ),
                                       onLongPress:
-                                          () => ChatDialogService.showReactionDialog(
+                                          (position) => ChatDialogService.showReactionDialog(
                                             context: context,
                                             ref: ref,
                                             message: message,
                                             messageIndex: messageIndex,
+                                            messagePosition: position,
                                           ),
                                       child: Hero(
                                         tag: message.id,

lib/ui/chat/services/chat_dialog_service.dart

@@ -87,6 +87,7 @@ class ChatDialogService {
     required WidgetRef ref,
     required MessageModel message,
     required int messageIndex,
+    Offset? messagePosition,
   }) {
     final chatNotifier = ref.read(chatProvider.notifier);
 
@@ -138,6 +139,7 @@ class ChatDialogService {
               }
             },
             widgetAlignment: message.isMe ? Alignment.centerRight : Alignment.centerLeft,
+            messagePosition: messagePosition,
           );
         },
       ),

lib/ui/chat/widgets/reaction/reactions_dialog_widget.dart

@@ -21,6 +21,7 @@ class ReactionsDialogWidget extends StatefulWidget {
     this.reactions = DefaultData.reactions,
     this.widgetAlignment = Alignment.centerRight,
     this.menuItemsWidth = 0.50,
+    this.messagePosition,
   });
 
   // Id for the hero widget
@@ -47,6 +48,9 @@ class ReactionsDialogWidget extends StatefulWidget {
   // The width of the menu items
   final double menuItemsWidth;
 
+  // The position of the message on screen (optional)
+  final Offset? messagePosition;
+
   @override
   State<ReactionsDialogWidget> createState() => _ReactionsDialogWidgetState();
 }
@@ -69,19 +73,17 @@ class _ReactionsDialogWidgetState extends State<ReactionsDialogWidget> {
         child: BackdropFilter(
           filter: ImageFilter.blur(sigmaX: 40, sigmaY: 40),
           child: SafeArea(
-            child: Column(
-              children: [
-                const Spacer(),
-                buildReactions(context),
-                Gap(16.h),
-                Padding(
-                  padding: EdgeInsets.symmetric(horizontal: 16.w),
-                  child: buildMessage(),
-                ),
-                Gap(16.h),
-                buildMenuItems(context),
-                Gap(32.h),
-              ],
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                return _PositionedContent(
+                  messagePosition: widget.messagePosition,
+                  menuItemsCount: widget.menuItems.length,
+                  buildReactions: () => buildReactions(context),
+                  buildMessage: buildMessage,
+                  buildMenuItems: () => buildMenuItems(context),
+                  constraints: constraints,
+                );
+              },
             ),
           ),
         ),
@@ -94,7 +96,7 @@ class _ReactionsDialogWidgetState extends State<ReactionsDialogWidget> {
       alignment: widget.widgetAlignment,
       child: Container(
         width: MediaQuery.of(context).size.width * widget.menuItemsWidth,
-        margin: EdgeInsets.symmetric(horizontal: 48.w),
+        margin: EdgeInsets.symmetric(horizontal: 18.w),
         decoration: BoxDecoration(
           color: context.colors.primaryForeground,
         ),
@@ -164,7 +166,7 @@ class _ReactionsDialogWidgetState extends State<ReactionsDialogWidget> {
     return Align(
       alignment: widget.widgetAlignment,
       child: Container(
-        margin: EdgeInsets.symmetric(horizontal: 16.w),
+        margin: EdgeInsets.symmetric(horizontal: 8.w),
         child: widget.messageWidget,
       ),
     );
@@ -240,3 +242,124 @@ class _ReactionsDialogWidgetState extends State<ReactionsDialogWidget> {
     );
   }
 }
+
+class _PositionedContent extends StatelessWidget {
+  const _PositionedContent({
+    required this.messagePosition,
+    required this.menuItemsCount,
+    required this.buildReactions,
+    required this.buildMessage,
+    required this.buildMenuItems,
+    required this.constraints,
+  });
+
+  final Offset? messagePosition;
+  final int menuItemsCount;
+  final Widget Function() buildReactions;
+  final Widget Function() buildMessage;
+  final Widget Function() buildMenuItems;
+  final BoxConstraints constraints;
+
+  @override
+  Widget build(BuildContext context) {
+    final reactionBarHeight = 56.h; // Approximate height of reaction bar
+    final menuItemsHeight = (menuItemsCount * 48.h) + 32.h; // Menu items + bottom gap
+    final gapBetweenReactionsAndMessage = 16.h;
+    final gapBetweenMessageAndMenu = 16.h;
+
+    final heightBelowMessage = gapBetweenMessageAndMenu + menuItemsHeight;
+
+    if (messagePosition != null) {
+      final topSpacing = _calculateTopSpacing(
+        context: context,
+        reactionBarHeight: reactionBarHeight,
+        heightBelowMessage: heightBelowMessage,
+        gapBetweenReactionsAndMessage: gapBetweenReactionsAndMessage,
+      );
+
+      return _buildPositionedLayout(
+        topSpacing: topSpacing,
+        gapBetweenReactionsAndMessage: gapBetweenReactionsAndMessage,
+        gapBetweenMessageAndMenu: gapBetweenMessageAndMenu,
+      );
+    }
+
+    return _buildCenteredLayout();
+  }
+
+  double _calculateTopSpacing({
+    required BuildContext context,
+    required double reactionBarHeight,
+    required double heightBelowMessage,
+    required double gapBetweenReactionsAndMessage,
+  }) {
+    // Get the safe area insets to adjust for status bar, notch, etc.
+    final mediaQuery = MediaQuery.of(context);
+    final topInset = mediaQuery.padding.top;
+
+    // The position passed is the top of the message widget in global coordinates
+    // Adjust by subtracting the top safe area inset because dialog is inside SafeArea
+    final messageTopPosition = messagePosition!.dy - topInset;
+    final screenHeight = constraints.maxHeight;
+
+    // Calculate where the reactions bar should be positioned (above the message)
+    // This offset accounts for typical message padding and visual spacing
+    final reactionBarOffset = 40.h;
+    // Additional upward adjustment for better visual alignment
+    final visualAlignmentOffset = 16.h;
+    final messageTopY = messageTopPosition - reactionBarOffset - visualAlignmentOffset;
+
+    final spaceBelow = screenHeight - messageTopPosition - 40.h;
+
+    // Check if we need to move the message up to fit the menu
+    final adjustedMessageTopY =
+        spaceBelow < heightBelowMessage
+            ? (messageTopY - (heightBelowMessage - spaceBelow)).clamp(
+              reactionBarHeight + gapBetweenReactionsAndMessage + 20.h, // Minimum top position
+              messageTopY, // Don't move down, only up
+            )
+            : messageTopY;
+
+    // Position with reactions above the message position
+    return (adjustedMessageTopY - reactionBarHeight - gapBetweenReactionsAndMessage).clamp(
+      0.0,
+      screenHeight,
+    );
+  }
+
+  Widget _buildPositionedLayout({
+    required double topSpacing,
+    required double gapBetweenReactionsAndMessage,
+    required double gapBetweenMessageAndMenu,
+  }) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Gap(topSpacing),
+        buildReactions(),
+        Gap(gapBetweenReactionsAndMessage),
+        buildMessage(),
+        Gap(gapBetweenMessageAndMenu),
+        buildMenuItems(),
+        const Spacer(),
+      ],
+    );
+  }
+
+  Widget _buildCenteredLayout() {
+    return Column(
+      children: [
+        const Spacer(),
+        buildReactions(),
+        Gap(16.h),
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 16.w),
+          child: buildMessage(),
+        ),
+        Gap(16.h),
+        buildMenuItems(),
+        Gap(32.h),
+      ],
+    );
+  }
+}

lib/ui/chat/widgets/swipe_to_reply_widget.dart

@@ -11,7 +11,7 @@ import 'package:whitenoise/ui/core/ui/wn_image.dart';
 class SwipeToReplyWidget extends StatefulWidget {
   final MessageModel message;
   final VoidCallback onReply;
-  final VoidCallback onLongPress;
+  final Function(Offset) onLongPress;
   final Widget child;
 
   const SwipeToReplyWidget({
@@ -36,6 +36,7 @@ class _SwipeToReplyWidgetState extends State<SwipeToReplyWidget> {
   bool _canUndo = false;
   Timer? _longPressTimer;
   Timer? _longPressHapticTimer;
+  Offset? _tapPosition;
 
   void _handleDragStart(DragStartDetails details) {
     _longPressTimer?.cancel();
@@ -88,13 +89,27 @@ class _SwipeToReplyWidgetState extends State<SwipeToReplyWidget> {
     _longPressTimer?.cancel();
     _longPressHapticTimer?.cancel();
 
+    // Store the tap position - this is the global position on screen
+    _tapPosition = details.globalPosition;
+
     _longPressHapticTimer = Timer(const Duration(milliseconds: 100), () {
       HapticFeedback.mediumImpact();
     });
 
     _longPressTimer = Timer(const Duration(milliseconds: 350), () {
       _longPressHapticTimer?.cancel();
-      widget.onLongPress();
+
+      // Get the widget's position on screen using RenderBox
+      final RenderBox? renderBox = context.findRenderObject() as RenderBox?;
+      if (renderBox != null) {
+        // Get position relative to the entire screen (global coordinates)
+        final position = renderBox.localToGlobal(Offset.zero);
+
+        widget.onLongPress(position);
+      } else {
+        // Fallback to tap position if RenderBox is not available
+        widget.onLongPress(_tapPosition ?? Offset.zero);
+      }
     });
   }