Merge pull request #719 from pangeachat/scrollable-overlay-message

Scrollable overlay message

lib/pangea/widgets/chat/message_selection_overlay.dart

@@ -232,8 +232,8 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
         messageSize!.height -
         toolbarButtonsHeight;
 
-    final bool hasHeaderOverflow = (messageOffset!.dy - toolbarButtonsHeight) <
+    final bool hasHeaderOverflow =
-        (AppConfig.toolbarMaxHeight + headerHeight);
+        messageOffset!.dy < (AppConfig.toolbarMaxHeight + headerHeight);
     final bool hasFooterOverflow = footerHeight > currentBottomOffset;
 
     if (!hasHeaderOverflow && !hasFooterOverflow) return;
@@ -252,7 +252,8 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
         newTopOffset < (headerHeight + AppConfig.toolbarMaxHeight);
 
     if (hasHeaderOverflow || upshiftCausesHeaderOverflow) {
-      animationEndOffset = midpoint - messageSize!.height;
+      animationEndOffset =
+          midpoint - messageSize!.height - toolbarButtonsHeight;
       final totalTopOffset =
           animationEndOffset + messageSize!.height + AppConfig.toolbarMaxHeight;
       final remainingSpace = screenHeight - totalTopOffset;
@@ -266,6 +267,15 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
       animationEndOffset = footerHeight;
     }
 
+    if (animationEndOffset < footerHeight + toolbarButtonsHeight) {
+      adjustedMessageHeight = screenHeight -
+          AppConfig.toolbarMaxHeight -
+          headerHeight -
+          footerHeight -
+          toolbarButtonsHeight;
+      animationEndOffset = footerHeight;
+    }
+
     _overlayPositionAnimation = Tween<double>(
       begin: currentBottomOffset,
       end: animationEndOffset,
@@ -296,6 +306,7 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
 
   Size? get messageSize => messageRenderBox?.size;
   Offset? get messageOffset => messageRenderBox?.localToGlobal(Offset.zero);
+  double? adjustedMessageHeight;
 
   // height of the reply/forward bar + the reaction picker + contextual padding
   double get footerHeight =>
@@ -352,9 +363,12 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
               pangeaMessageEvent: widget._pangeaMessageEvent,
               overLayController: this,
             ),
-            OverlayMessage(
+            SizedBox(
+              height: adjustedMessageHeight,
+              child: OverlayMessage(
                 pangeaMessageEvent,
-              immersionMode: widget.chatController.choreographer.immersionMode,
+                immersionMode:
+                    widget.chatController.choreographer.immersionMode,
                 controller: widget.chatController,
                 overlayController: this,
                 nextEvent: widget._nextEvent,
@@ -363,6 +377,7 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
                 messageWidth: messageSize!.width,
                 messageHeight: messageSize!.height,
               ),
+            ),
             ToolbarButtons(
               overlayController: this,
               width: 250,

lib/pangea/widgets/chat/message_toolbar.dart

@@ -133,6 +133,9 @@ class MessageToolbarState extends State<MessageToolbar> {
                 Radius.circular(AppConfig.borderRadius),
               ),
             ),
+            constraints: const BoxConstraints(
+              maxHeight: AppConfig.toolbarMaxHeight,
+            ),
             child: Row(
               children: [
                 Expanded(

lib/pangea/widgets/chat/overlay_message.dart

@@ -88,6 +88,7 @@ class OverlayMessage extends StatelessWidget {
       shape: RoundedRectangleBorder(
         borderRadius: borderRadius,
       ),
+      child: SingleChildScrollView(
         child: Container(
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(
@@ -114,6 +115,7 @@ class OverlayMessage extends StatelessWidget {
             borderRadius: borderRadius,
           ),
         ),
+      ),
     );
   }
 }