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,16 +363,20 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
               pangeaMessageEvent: widget._pangeaMessageEvent,
               overLayController: this,
             ),
-            OverlayMessage(
+            SizedBox(
-              pangeaMessageEvent,
+              height: adjustedMessageHeight,
-              immersionMode: widget.chatController.choreographer.immersionMode,
+              child: OverlayMessage(
-              controller: widget.chatController,
+                pangeaMessageEvent,
-              overlayController: this,
+                immersionMode:
-              nextEvent: widget._nextEvent,
+                    widget.chatController.choreographer.immersionMode,
-              prevEvent: widget._prevEvent,
+                controller: widget.chatController,
-              timeline: widget.chatController.timeline!,
+                overlayController: this,
-              messageWidth: messageSize!.width,
+                nextEvent: widget._nextEvent,
-              messageHeight: messageSize!.height,
+                prevEvent: widget._prevEvent,
+                timeline: widget.chatController.timeline!,
+                messageWidth: messageSize!.width,
+                messageHeight: messageSize!.height,
+              ),
             ),
             ToolbarButtons(
               overlayController: this,

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,30 +88,32 @@ class OverlayMessage extends StatelessWidget {
       shape: RoundedRectangleBorder(
         borderRadius: borderRadius,
       ),
-      child: Container(
+      child: SingleChildScrollView(
-        decoration: BoxDecoration(
+        child: Container(
-          borderRadius: BorderRadius.circular(
+          decoration: BoxDecoration(
-            AppConfig.borderRadius,
+            borderRadius: BorderRadius.circular(
+              AppConfig.borderRadius,
+            ),
+          ),
+          padding: const EdgeInsets.symmetric(
+            horizontal: 16,
+            vertical: 8,
+          ),
+          width: messageWidth,
+          height: messageHeight,
+          child: MessageContent(
+            pangeaMessageEvent.event,
+            textColor: ownMessage
+                ? theme.colorScheme.onPrimary
+                : theme.colorScheme.onSurface,
+            pangeaMessageEvent: pangeaMessageEvent,
+            immersionMode: immersionMode,
+            overlayController: overlayController,
+            controller: controller,
+            nextEvent: nextEvent,
+            prevEvent: prevEvent,
+            borderRadius: borderRadius,
           ),
-        ),
-        padding: const EdgeInsets.symmetric(
-          horizontal: 16,
-          vertical: 8,
-        ),
-        width: messageWidth,
-        height: messageHeight,
-        child: MessageContent(
-          pangeaMessageEvent.event,
-          textColor: ownMessage
-              ? theme.colorScheme.onPrimary
-              : theme.colorScheme.onSurface,
-          pangeaMessageEvent: pangeaMessageEvent,
-          immersionMode: immersionMode,
-          overlayController: overlayController,
-          controller: controller,
-          nextEvent: nextEvent,
-          prevEvent: prevEvent,
-          borderRadius: borderRadius,
         ),
       ),
     );