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.

Author: sirpengi

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,
+      child: Column(
+        children: [
+          if (senderRow != null) senderRow,
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: 4),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
               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!)
+                const SizedBox(width: 16),
+                Expanded(
+                  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),
               ])),
-        ])));
+        ]));
   }
 }