msglist: Update message layout to new design

Test 'basic' in group 'fetch older messages on scroll'
adjusted as layout change has caused the test to fail.

Author: sirpengi

lib/widgets/message_list.dart

@@ -854,62 +854,65 @@ class MessageWithPossibleSender extends StatelessWidget {
     final message = item.message;
 
     final Widget? senderRow = item.showSender
-      ? GestureDetector(
-          onTap: () => Navigator.push(context,
-            ProfilePage.buildRoute(context: context,
-              userId: message.senderId)),
-          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))))
+      ? 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.only(top: 2, bottom: 3, left: 8, right: 8),
+        padding: const EdgeInsets.symmetric(vertical: 4),
         child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
-          item.showSender
-            ? Padding(
-                padding: const EdgeInsets.fromLTRB(3, 6, 11, 0),
-                child: GestureDetector(
-                  onTap: () => Navigator.push(context,
-                    ProfilePage.buildRoute(context: context,
-                      userId: message.senderId)),
-                  child: Avatar(size: 35, borderRadius: 4,
-                    userId: message.senderId)))
-            : const SizedBox(width: 3 + 35 + 11),
+          const SizedBox(width: 16),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                if (item.showSender) ...[
-                  const SizedBox(height: 3),
-                  senderRow!,
+                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!)
               ])),
-          Container(
-            width: 80,
-            padding: const EdgeInsets.only(top: 4, right: 16 - 8),
-            alignment: Alignment.topRight,
-            child: 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)))),
+          const SizedBox(width: 16),
         ])));
   }
 }

test/widgets/message_list_test.dart

@@ -86,8 +86,8 @@ void main() {
 
     testWidgets('basic', (tester) async {
       await setupMessageListPage(tester, foundOldest: false,
-        messages: List.generate(200, (i) => eg.streamMessage(id: 950 + i, sender: eg.selfUser)));
-      check(itemCount(tester)).equals(203);
+        messages: List.generate(300, (i) => eg.streamMessage(id: 950 + i, sender: eg.selfUser)));
+      check(itemCount(tester)).equals(303);
 
       // Fling-scroll upward...
       await tester.fling(find.byType(MessageListPage), const Offset(0, 300), 8000);
@@ -100,7 +100,7 @@ void main() {
       await tester.pump(Duration.zero); // Allow a frame for the response to arrive.
 
       // Now we have more messages.
-      check(itemCount(tester)).equals(303);
+      check(itemCount(tester)).equals(403);
     });
 
     testWidgets('observe double-fetch glitch', (tester) async {