From f13d13b2ea7221eb6234ab28695e8632fd5efaa5 Mon Sep 17 00:00:00 2001
From: Yaros <thedj.launchpadder.dmx512@gmail.com>
Date: Sat, 1 Mar 2025 21:34:57 +0100
Subject: [PATCH] fix(web): Fixed people list overflowing in advanced search
 (#16457)

* Fixed people list overflowing in search

* styling: better fix

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../search-bar/search-people-section.svelte                 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
index ed17d78af3..bcf858d01a 100644
--- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
@@ -54,7 +54,7 @@
 </script>
 
 {#await peoplePromise}
-  <div id="spinner" class="flex h-60 items-center justify-center -mb-4">
+  <div id="spinner" class="flex h-[217px] items-center justify-center -mb-4">
     <LoadingSpinner size="24" />
   </div>
 {:then people}
@@ -63,14 +63,14 @@
       ? filterPeople(people, name)
       : filterPeople(people, name).slice(0, numberOfPeople)}
 
-    <div id="people-selection" class="h-60 -mb-4">
+    <div id="people-selection" class="max-h-60 -mb-4 overflow-y-auto immich-scrollbar">
       <div class="flex items-center w-full justify-between gap-6">
         <p class="immich-form-label py-3">{$t('people').toUpperCase()}</p>
         <SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />
       </div>
 
       <SingleGridRow
-        class="grid grid-auto-fill-20 -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
+        class="grid grid-auto-fill-20 gap-1 mt-2 overflow-y-auto immich-scrollbar"
         bind:itemCount={numberOfPeople}
       >
         {#each peopleList as person (person.id)}