From 27d5ef2bc06271f4607fe17de7878ea81d07d920 Mon Sep 17 00:00:00 2001
From: ashilkn <ashilkn99@gmail.com>
Date: Fri, 15 Nov 2024 15:31:53 +0530
Subject: [PATCH] [mob][photos] Fix alignment of faces in People section

---
 .../result/people_section_all_page.dart       | 78 ++++++++++---------
 .../ui/viewer/search_tab/people_section.dart  |  4 +-
 2 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/mobile/lib/ui/viewer/search/result/people_section_all_page.dart b/mobile/lib/ui/viewer/search/result/people_section_all_page.dart
index 17cb144f3c..6a5528fea3 100644
--- a/mobile/lib/ui/viewer/search/result/people_section_all_page.dart
+++ b/mobile/lib/ui/viewer/search/result/people_section_all_page.dart
@@ -51,50 +51,54 @@ class _PeopleSectionAllPageState extends State<PeopleSectionAllPage> {
     final smallFontSize = getEnteTextTheme(context).small.fontSize!;
     final textScaleFactor =
         MediaQuery.textScalerOf(context).scale(smallFontSize) / smallFontSize;
-    const horizontalEdgePadding = 4.0;
+    const horizontalEdgePadding = 20.0;
     const gridPadding = 16.0;
     return Scaffold(
       appBar: AppBar(
         title: Text(S.of(context).people),
       ),
-      body: FutureBuilder<List<SearchResult>>(
-        future: sectionData,
-        builder: (context, snapshot) {
-          if (snapshot.connectionState == ConnectionState.waiting) {
-            return const Center(child: CircularProgressIndicator());
-          } else if (snapshot.hasError) {
-            return Center(child: Text('Error: ${snapshot.error}'));
-          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
-            return const Center(child: Text('No results found.'));
-          } else {
-            final results = snapshot.data!;
-            final screenWidth = MediaQuery.of(context).size.width;
-            final crossAxisCount = (screenWidth / 100).floor();
+      body: SafeArea(
+        child: FutureBuilder<List<SearchResult>>(
+          future: sectionData,
+          builder: (context, snapshot) {
+            if (snapshot.connectionState == ConnectionState.waiting) {
+              return const Center(child: CircularProgressIndicator());
+            } else if (snapshot.hasError) {
+              return Center(child: Text('Error: ${snapshot.error}'));
+            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
+              return const Center(child: Text('No results found.'));
+            } else {
+              final results = snapshot.data!;
+              final screenWidth = MediaQuery.of(context).size.width;
+              final crossAxisCount = (screenWidth / 100).floor();
 
-            final itemSize = (screenWidth -
-                    ((horizontalEdgePadding * 2) +
-                        (crossAxisCount * gridPadding))) /
-                crossAxisCount;
+              final itemSize = (screenWidth -
+                      ((horizontalEdgePadding * 2) +
+                          ((crossAxisCount - 1) * gridPadding))) /
+                  crossAxisCount;
 
-            return GridView.builder(
-              padding: const EdgeInsets.all(horizontalEdgePadding),
-              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                mainAxisSpacing: gridPadding,
-                crossAxisSpacing: gridPadding,
-                crossAxisCount: crossAxisCount,
-                childAspectRatio:
-                    itemSize / (itemSize + (18 * textScaleFactor)),
-              ),
-              itemCount: results.length,
-              itemBuilder: (context, index) {
-                return PersonSearchExample(
-                  searchResult: results[index],
-                  size: itemSize,
-                );
-              },
-            );
-          }
-        },
+              return GridView.builder(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: horizontalEdgePadding,
+                ),
+                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                  mainAxisSpacing: gridPadding,
+                  crossAxisSpacing: gridPadding,
+                  crossAxisCount: crossAxisCount,
+                  childAspectRatio:
+                      itemSize / (itemSize + (24 * textScaleFactor)),
+                ),
+                itemCount: results.length,
+                itemBuilder: (context, index) {
+                  return PersonSearchExample(
+                    searchResult: results[index],
+                    size: itemSize,
+                  );
+                },
+              );
+            }
+          },
+        ),
       ),
     );
   }
diff --git a/mobile/lib/ui/viewer/search_tab/people_section.dart b/mobile/lib/ui/viewer/search_tab/people_section.dart
index df5c929e31..7ec0686ed2 100644
--- a/mobile/lib/ui/viewer/search_tab/people_section.dart
+++ b/mobile/lib/ui/viewer/search_tab/people_section.dart
@@ -170,7 +170,7 @@ class SearchExampleRow extends StatelessWidget {
     return SizedBox(
       height: 128,
       child: ListView.separated(
-        padding: const EdgeInsets.symmetric(horizontal: 7),
+        padding: const EdgeInsets.symmetric(horizontal: 6),
         physics: const BouncingScrollPhysics(),
         scrollDirection: Axis.horizontal,
         itemCount: examples.length,
@@ -179,7 +179,7 @@ class SearchExampleRow extends StatelessWidget {
             searchResult: examples[index],
           );
         },
-        separatorBuilder: (context, index) => const SizedBox(width: 5),
+        separatorBuilder: (context, index) => const SizedBox(width: 3),
       ),
     );
   }