From e376366b7bb74230b8e152daf7e2dec97ad462b9 Mon Sep 17 00:00:00 2001
From: JobiJoba <6494791+JobiJoba@users.noreply.github.com>
Date: Mon, 9 Jun 2025 09:49:13 +0700
Subject: [PATCH] fix(mobile): people collection page layout broken in
 landscape (#19004)

fix(mobile): people collection page layout broken on landscape
---
 .../people/people_collection.page.dart        | 136 +++++++++---------
 1 file changed, 70 insertions(+), 66 deletions(-)

diff --git a/mobile/lib/pages/library/people/people_collection.page.dart b/mobile/lib/pages/library/people/people_collection.page.dart
index 6ec0548546..4bc896771f 100644
--- a/mobile/lib/pages/library/people/people_collection.page.dart
+++ b/mobile/lib/pages/library/people/people_collection.page.dart
@@ -60,80 +60,84 @@ class PeopleCollectionPage extends HookConsumerWidget {
               ),
             ],
           ),
-          body: people.when(
-            data: (people) {
-              if (search.value != null) {
-                people = people.where((person) {
-                  return person.name
-                      .toLowerCase()
-                      .contains(search.value!.toLowerCase());
-                }).toList();
-              }
-              return GridView.builder(
-                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                  crossAxisCount: isTablet ? 6 : 3,
-                  childAspectRatio: 0.85,
-                  mainAxisSpacing: isPortrait && isTablet ? 36 : 0,
-                ),
-                padding: const EdgeInsets.symmetric(vertical: 32),
-                itemCount: people.length,
-                itemBuilder: (context, index) {
-                  final person = people[index];
+          body: SafeArea(
+            child: people.when(
+              data: (people) {
+                if (search.value != null) {
+                  people = people.where((person) {
+                    return person.name
+                        .toLowerCase()
+                        .contains(search.value!.toLowerCase());
+                  }).toList();
+                }
+                return GridView.builder(
+                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: isTablet ? 6 : 3,
+                    childAspectRatio: 0.85,
+                    mainAxisSpacing: isPortrait && isTablet ? 36 : 0,
+                  ),
+                  padding: const EdgeInsets.symmetric(vertical: 32),
+                  itemCount: people.length,
+                  itemBuilder: (context, index) {
+                    final person = people[index];
 
-                  return Column(
-                    children: [
-                      GestureDetector(
-                        onTap: () {
-                          context.pushRoute(
-                            PersonResultRoute(
-                              personId: person.id,
-                              personName: person.name,
-                            ),
-                          );
-                        },
-                        child: Material(
-                          shape: const CircleBorder(side: BorderSide.none),
-                          elevation: 3,
-                          child: CircleAvatar(
-                            maxRadius: isTablet ? 120 / 2 : 96 / 2,
-                            backgroundImage: NetworkImage(
-                              getFaceThumbnailUrl(person.id),
-                              headers: headers,
+                    return Column(
+                      children: [
+                        GestureDetector(
+                          onTap: () {
+                            context.pushRoute(
+                              PersonResultRoute(
+                                personId: person.id,
+                                personName: person.name,
+                              ),
+                            );
+                          },
+                          child: Material(
+                            shape: const CircleBorder(side: BorderSide.none),
+                            elevation: 3,
+                            child: CircleAvatar(
+                              maxRadius: isTablet ? 120 / 2 : 96 / 2,
+                              backgroundImage: NetworkImage(
+                                getFaceThumbnailUrl(person.id),
+                                headers: headers,
+                              ),
                             ),
                           ),
                         ),
-                      ),
-                      const SizedBox(height: 12),
-                      GestureDetector(
-                        onTap: () => showNameEditModel(person.id, person.name),
-                        child: person.name.isEmpty
-                            ? Text(
-                                'add_a_name'.tr(),
-                                style: context.textTheme.titleSmall?.copyWith(
-                                  fontWeight: FontWeight.w500,
-                                  color: context.colorScheme.primary,
-                                ),
-                              )
-                            : Padding(
-                                padding: const EdgeInsets.symmetric(
-                                  horizontal: 16.0,
-                                ),
-                                child: Text(
-                                  person.name,
-                                  overflow: TextOverflow.ellipsis,
+                        const SizedBox(height: 12),
+                        GestureDetector(
+                          onTap: () =>
+                              showNameEditModel(person.id, person.name),
+                          child: person.name.isEmpty
+                              ? Text(
+                                  'add_a_name'.tr(),
                                   style: context.textTheme.titleSmall?.copyWith(
                                     fontWeight: FontWeight.w500,
+                                    color: context.colorScheme.primary,
+                                  ),
+                                )
+                              : Padding(
+                                  padding: const EdgeInsets.symmetric(
+                                    horizontal: 16.0,
+                                  ),
+                                  child: Text(
+                                    person.name,
+                                    overflow: TextOverflow.ellipsis,
+                                    style:
+                                        context.textTheme.titleSmall?.copyWith(
+                                      fontWeight: FontWeight.w500,
+                                    ),
                                   ),
                                 ),
-                              ),
-                      ),
-                    ],
-                  );
-                },
-              );
-            },
-            error: (error, stack) => const Text("error"),
-            loading: () => const Center(child: CircularProgressIndicator()),
+                        ),
+                      ],
+                    );
+                  },
+                );
+              },
+              error: (error, stack) => const Text("error"),
+              loading: () => const Center(child: CircularProgressIndicator()),
+            ),
           ),
         );
       },