From 42ce8c509353c3ff56ca52d552fe8f8784cd075d Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Mon, 19 Feb 2024 21:24:41 -0600
Subject: [PATCH] chore(web): show people list on a single line in filter form
 when not expanded (#7216)

---
 .../shared-components/search-bar/search-filter-box.svelte   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte b/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
index 0df5d537952..73c115b3cf4 100644
--- a/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
@@ -102,7 +102,10 @@
 
   const dispatch = createEventDispatcher<{ search: SmartSearchDto | MetadataSearchDto }>();
   let showAllPeople = false;
-  $: peopleList = showAllPeople ? suggestions.people : suggestions.people.slice(0, 11);
+
+  let filterBoxWidth = 0;
+  $: numberOfPeople = (filterBoxWidth - 80) / 85;
+  $: peopleList = showAllPeople ? suggestions.people : suggestions.people.slice(0, numberOfPeople);
 
   onMount(() => {
     getPeople();
@@ -314,6 +317,7 @@
 </script>
 
 <div
+  bind:clientWidth={filterBoxWidth}
   transition:fly={{ y: 25, duration: 250 }}
   class="absolute w-full rounded-b-3xl border border-gray-200 bg-white shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300 px-6 pt-6 overflow-y-auto max-h-[90vh] immich-scrollbar"
 >