chore(web): show people list on a single line in filter form when not…

… expanded (#7216)
immich-app · Feb 20, 2024 · 42ce8c5 · 42ce8c5
1 parent 6690e8e
commit 42ce8c5
Showing 1 changed file with 5 additions and 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
@@ -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"
 >