feat(ui): Replace Wrap with a GridView

lib/ui/widgets/chat/shared/media.dart

@@ -9,48 +9,19 @@ class SharedMediaDisplay extends StatelessWidget {
   final List<SharedMedium> sharedMedia;
   final String jid;
   final String title;
-
-  List<Widget> _renderItems() {
-    final tmp = List<Widget>.empty(growable: true);
-
-    // NOTE: 6, since that lets us iterate from 0 to 6 (7 elements), thus leaving
-    //       one space for the summary button
-    final clampedEndIndex = sharedMedia.length >= 8 ? 6 : sharedMedia.length - 1;
-    for (var i = 0; i <= clampedEndIndex; i++) {
-      tmp.add(buildSharedMediaWidget(sharedMedia[i], jid));
-    }
-
-    if (sharedMedia.length >= 8) {
-      tmp.add(
-        SharedSummaryWidget(
-          notShown: sharedMedia.length - 7,
-          conversationJid: jid,
-          conversationTitle: title,
-        ),
-      );
-    }
-    
-    return tmp;
-  }
   
   @override
   Widget build(BuildContext context) {
     if (sharedMedia.isEmpty) return const SizedBox();
 
-    final width = MediaQuery.of(context).size.width;
-    // NOTE: Based on the formula width = 2padding + (n-1)5 + 75n,
-    //       with n being the number of item to show. If we set n=4, then
-    //       the padding will always be the same.
-    final padding = 0.5 * (width - 15 - 300);
-    
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Padding(
-          padding: EdgeInsets.only(
+          padding: const EdgeInsets.only(
             top: 25,
-            left: padding,
+            left: 16,
-            right: padding,
+            right: 16,
           ),
           child: Text(
             t.pages.profile.conversation.sharedMedia,
@@ -58,16 +29,33 @@ class SharedMediaDisplay extends StatelessWidget {
           ),
         ),
         Padding(
-          padding: EdgeInsets.only(top: 8, left: padding, right: padding),
+          padding: const EdgeInsets.only(top: 8, left: 16, right: 16),
           child: Container(
             alignment: Alignment.topLeft,
-            child: Wrap(
+            child: GridView(
-              spacing: 5,
+              shrinkWrap: true,
-              runSpacing: 5,
+              physics: const NeverScrollableScrollPhysics(),
-              children: _renderItems(),
+              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 4,
+                mainAxisSpacing: 8,
+                crossAxisSpacing: 8,
+              ),
+              children: sharedMedia
+                .sublist(0, 8)
+                .map((el) {
+                  if (el == sharedMedia.last) {
+                    return SharedSummaryWidget(
+                      notShown: sharedMedia.length - 7,
+                      conversationJid: jid,
+                      conversationTitle: title,
+                    );
+                  }
+
+                  return buildSharedMediaWidget(el, jid);
+                }).toList(),
             ),
           ),
-        )
+        ),
       ],
     );
   }