fix reaction ui

lib/src/message_widget.dart

@@ -156,7 +156,7 @@ class _MessageWidgetState extends State<MessageWidget>
                 children: <Widget>[
                   Column(
                     mainAxisSize: MainAxisSize.min,
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: <Widget>[
                       attachmentWidget,
                       attachment.title != null
@@ -224,17 +224,33 @@ class _MessageWidgetState extends State<MessageWidget>
 
     if (widget.message.text.trim().isNotEmpty) {
       final topPadding =
-          widget.message.reactionCounts?.isNotEmpty == true ? 36.0 : 0.0;
-      column.children.add(Stack(
+          widget.message.reactionCounts?.isNotEmpty == true ? 2.0 : 0.0;
+      column.children.addAll(
+        <Widget>[
+          Align(
+            child: _buildReactions(isMyMessage),
+            alignment:
+                isMyMessage ? Alignment.centerLeft : Alignment.centerRight,
+          ),
+          Stack(
             overflow: Overflow.visible,
-        alignment: Alignment.centerRight,
             children: <Widget>[
-          Positioned(
-              left: isMyMessage ? 0 : null,
-              right: !isMyMessage ? 0 : null,
-              top: 0,
-              child: _buildReactions(isMyMessage)),
-          AnimatedContainer(
+              widget.message.reactionCounts?.isNotEmpty == true
+                  ? Positioned(
+                      left: isMyMessage ? 8 : null,
+                      right: !isMyMessage ? 8 : null,
+                      top: -4,
+                      child: CustomPaint(
+                        painter: ReactionBubblePainter(),
+                      ),
+                    )
+                  : SizedBox(),
+              Padding(
+                padding: EdgeInsets.only(
+                  right: isMyMessage ? 0.0 : 8.0,
+                  left: isMyMessage ? 8.0 : 0.0,
+                ),
+                child: AnimatedContainer(
                   duration: Duration(milliseconds: 300),
                   margin: EdgeInsets.only(
                     top: nOfAttachmentWidgets > 0 ? (topPadding) : (topPadding),
@@ -251,12 +267,15 @@ class _MessageWidgetState extends State<MessageWidget>
                     styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)),
                   ),
                 ),
+              ),
             ],
-      ));
+          ),
+        ],
+      );
     }
 
     return GestureDetector(
-        child: column,
+        child: IntrinsicWidth(child: column),
         onLongPress: () {
           _showMessageBottomSheet(context);
         });
@@ -307,32 +326,15 @@ class _MessageWidgetState extends State<MessageWidget>
   }
 
   Widget _buildReactions(bool isMyMessage) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 2.0),
-      child: GestureDetector(
+    return GestureDetector(
       onTap: () {
         _showMessageBottomSheet(context);
       },
-        child: Stack(
-          overflow: Overflow.visible,
-          children: <Widget>[
-            widget.message.reactionCounts?.isNotEmpty == true
-                ? Positioned(
-                    left: isMyMessage ? 0 : null,
-                    right: !isMyMessage ? 0 : null,
-                    bottom: 2,
-                    child: CustomPaint(
-                      painter: ReactionBubblePainter(),
-                    ),
-                  )
-                : SizedBox(),
-            Container(
-              transform: Matrix4.translationValues(
-                ((widget.message.reactionCounts?.length ?? 0) * 10) *
-                    (isMyMessage ? -1.0 : 1.0),
-                0,
-                0,
-              ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 2.0),
+        child: AnimatedContainer(
+          duration: Duration(milliseconds: 300),
+          curve: Curves.decelerate,
           padding: widget.message.reactionCounts?.isNotEmpty == true
               ? const EdgeInsets.all(8)
               : EdgeInsets.zero,
@@ -342,10 +344,10 @@ class _MessageWidgetState extends State<MessageWidget>
           child: (widget.message.reactionCounts != null &&
                   widget.message.reactionCounts.isNotEmpty)
               ? Row(
-                      mainAxisSize: MainAxisSize.max,
+                  mainAxisSize: MainAxisSize.min,
                   mainAxisAlignment: MainAxisAlignment.start,
-                      children: widget.message.reactionCounts.keys
-                          .map((reactionType) {
+                  children:
+                      widget.message.reactionCounts.keys.map((reactionType) {
                     return Text(
                       reactionToEmoji[reactionType] ?? '?',
                     ) as Widget; //TODO refactor
@@ -361,8 +363,6 @@ class _MessageWidgetState extends State<MessageWidget>
                         )))
               : SizedBox(),
         ),
-          ],
-        ),
       ),
     );
   }