fix: reduce bubble message width

This Closes #469
linagora · Aug 25, 2023 · db2f608 · db2f608
1 parent a6c42e7
commit db2f608
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart
@@ -117,8 +117,10 @@ class Message extends StatelessWidget {
               children: [
                 // if (ownMessage && event.messageType == MessageTypes.Image)
                 //   ReplyIconWidget(isOwnMessage: ownMessage),
-                Expanded(
-                  flex: MessageStyle.messageFlexMobile,
+                Container(
+                  constraints: BoxConstraints(
+                    maxWidth: MessageStyle.messageBubbleWidth(context),
+                  ),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     mainAxisSize: MainAxisSize.min,

diff --git a/lib/pages/chat/events/message/message_style.dart b/lib/pages/chat/events/message/message_style.dart
@@ -1,5 +1,6 @@
 import 'package:fluffychat/config/app_config.dart';
 import 'package:flutter/material.dart';
+import 'package:fluffychat/utils/extension/build_context_extension.dart';
 
 class MessageStyle {
   static final bubbleBorderRadius = BorderRadius.circular(20);
@@ -47,4 +48,17 @@ class MessageStyle {
   static double get forwardContainerSize => 40.0;
   static Color? forwardColorBackground(context) =>
       Theme.of(context).colorScheme.surfaceTint.withOpacity(0.08);
+
+  static const double messageBubbleLargeMaxWidth = 620.0;
+  static const double messageBubbleWatchMaxWidth = 240.0;
+  static const double messageBubbleMobileRatioMaxWidth = 0.80;
+  static double messageBubbleWidth(BuildContext context) {
+    return context.responsiveValue<double>(
+      desktop: messageBubbleLargeMaxWidth,
+      tablet: messageBubbleLargeMaxWidth,
+      mobile:
+          MediaQuery.of(context).size.width * messageBubbleMobileRatioMaxWidth,
+      watch: messageBubbleWatchMaxWidth,
+    );
+  }
 }