msglist: Move senderRow into a separate row

Moved widgets around such that the gutters to the
left and right of message contents are ready for
future decorative elements.

Fixes-partly: #157

Author: sirpengi

lib/widgets/message_list.dart

@@ -854,64 +854,64 @@ class MessageWithPossibleSender extends StatelessWidget {
     final message = item.message;
 
     final Widget? senderRow = item.showSender
-      ? Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          crossAxisAlignment: CrossAxisAlignment.baseline,
-          textBaseline: TextBaseline.alphabetic,
-          children: [
-            Flexible(
-              child: GestureDetector(
-                onTap: () => Navigator.push(context,
-                  ProfilePage.buildRoute(context: context,
-                    userId: message.senderId)),
-                child: Row(
-                  children: [
-                    Avatar(size: 32, borderRadius: 3,
-                      userId: message.senderId),
-                    const SizedBox(width: 8),
-                    Flexible(
-                      child: Text(message.senderFullName, // TODO get from user data
-                        style: const TextStyle(
-                          fontFamily: 'Source Sans 3',
-                          fontSize: 18,
-                          height: (22 / 18),
-                        ).merge(weightVariableTextStyle(context, wght: 600,
-                            wghtIfPlatformRequestsBold: 900)),
-                        overflow: TextOverflow.ellipsis)),
-                  ]))),
-            Text(
-              _kMessageTimestampFormat.format(
-                DateTime.fromMillisecondsSinceEpoch(1000 * message.timestamp)),
-              style: TextStyle(
-                color: _kMessageTimestampColor,
-                fontFamily: 'Source Sans 3',
-                fontSize: 16,
-                height: (18 / 16),
-                fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
-              ).merge(weightVariableTextStyle(context))),
-          ])
+      ? Padding(
+          padding: const EdgeInsets.only(top: 2, bottom: 4, left: 16, right: 16),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.baseline,
+            textBaseline: TextBaseline.alphabetic,
+            children: [
+              Flexible(
+                child: GestureDetector(
+                  onTap: () => Navigator.push(context,
+                    ProfilePage.buildRoute(context: context,
+                      userId: message.senderId)),
+                  child: Row(
+                    children: [
+                      Avatar(size: 32, borderRadius: 3,
+                        userId: message.senderId),
+                      const SizedBox(width: 8),
+                      Flexible(
+                        child: Text(message.senderFullName, // TODO get from user data
+                          style: const TextStyle(
+                            fontFamily: 'Source Sans 3',
+                            fontSize: 18,
+                            height: (22 / 18),
+                          ).merge(weightVariableTextStyle(context, wght: 600,
+                              wghtIfPlatformRequestsBold: 900)),
+                          overflow: TextOverflow.ellipsis)),
+                    ]))),
+              Text(
+                _kMessageTimestampFormat.format(
+                  DateTime.fromMillisecondsSinceEpoch(1000 * message.timestamp)),
+                style: TextStyle(
+                  color: _kMessageTimestampColor,
+                  fontFamily: 'Source Sans 3',
+                  fontSize: 16,
+                  height: (18 / 16),
+                  fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
+                ).merge(weightVariableTextStyle(context))),
+            ]))
       : null;
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onLongPress: () => showMessageActionSheet(context: context, message: message),
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 4),
-        child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
-          const SizedBox(width: 16),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                if (senderRow != null) ...[
-                  const SizedBox(height: 2),
-                  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),
+        child: Column(children: [
+          if (senderRow != null) senderRow,
+          Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
+            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),
+          ]),
         ])));
   }
 }