msglist: Update layout of messages

Adjusted padding/spacing as per Figma design and moved widgets around such that the gutters to the left and right of message contents are ready for future decorative elements.
sirpengi · Jan 10, 2024 · 4108d79 · 4108d79
1 parent c16f1ba
commit 4108d79
Showing 1 changed file with 21 additions and 18 deletions.
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -855,7 +855,7 @@ class MessageWithPossibleSender extends StatelessWidget {
 
     final Widget? senderRow = item.showSender
       ? Padding(
-          padding: const EdgeInsets.fromLTRB(3, 6, 11, 0),
+          padding: const EdgeInsets.only(top: 6, left: 16, right: 16),
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             crossAxisAlignment: CrossAxisAlignment.baseline,
@@ -896,23 +896,26 @@ class MessageWithPossibleSender extends StatelessWidget {
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onLongPress: () => showMessageActionSheet(context: context, message: message),
-      child: Padding(
-        padding: const EdgeInsets.only(top: 2, bottom: 3, left: 8, right: 8),
-        child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                if (senderRow != null) ...[
-                  const SizedBox(height: 3),
-                  senderRow,
-                  const SizedBox(height: 4),
-                ],
-                MessageContent(message: message, content: item.content),
-                if ((message.reactions?.total ?? 0) > 0)
-                  ReactionChipsList(messageId: message.id, reactions: message.reactions!)
-              ])),
-        ])));
+      child: Column(
+        children: [
+          if (senderRow != null) senderRow,
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const SizedBox(width: 16),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 4),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      MessageContent(message: message, content: item.content),
+                      if ((message.reactions?.total ?? 0) > 0)
+                        ReactionChipsList(messageId: message.id, reactions: message.reactions!)
+                    ]))),
+              const SizedBox(width: 16),
+            ]),
+        ]));
   }
 }