fix(web): single row of items (#11729)

* fix(web): single row of items

* remove filterBoxWidth

* slight size adjustment

* rewrite action as component

web/src/lib/components/shared-components/search-bar/search-filter-box.svelte

@@ -77,8 +77,6 @@
           : MediaType.All,
   };
 
-  let filterBoxWidth = 0;
-
   const resetForm = () => {
     filter = {
       personIds: new Set(),
@@ -120,7 +118,6 @@
 </script>
 
 <div
-  bind:clientWidth={filterBoxWidth}
   transition:fly={{ y: 25, duration: 250 }}
   class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300"
 >
@@ -132,7 +129,7 @@
   >
     <div class="px-4 sm:px-6 py-4 space-y-10 max-h-[calc(100dvh-12rem)] overflow-y-auto immich-scrollbar" tabindex="-1">
       <!-- PEOPLE -->
-      <SearchPeopleSection width={filterBoxWidth} bind:selectedPeople={filter.personIds} />
+      <SearchPeopleSection bind:selectedPeople={filter.personIds} />
 
       <!-- TEXT -->
       <SearchTextSection bind:filename={filter.filename} bind:context={filter.context} />

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -8,14 +8,14 @@
   import { mdiClose, mdiArrowRight } from '@mdi/js';
   import { handleError } from '$lib/utils/handle-error';
   import { t } from 'svelte-i18n';
+  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
 
-  export let width: number;
   export let selectedPeople: Set<string>;
 
   let peoplePromise = getPeople();
   let showAllPeople = false;
   let name = '';
-  $: numberOfPeople = (width - 80) / 85;
+  let numberOfPeople = 1;
 
   function orderBySelectedPeopleFirst(people: PersonResponseDto[]) {
     return [
@@ -60,11 +60,14 @@
         <SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />
       </div>
 
-      <div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">
+      <SingleGridRow
+        class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
+        bind:itemCount={numberOfPeople}
+      >
         {#each peopleList as person (person.id)}
           <button
             type="button"
-            class="flex flex-col items-center w-20 rounded-3xl border-2 hover:bg-immich-gray dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
+            class="flex flex-col items-center rounded-3xl border-2 hover:bg-immich-gray dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
               person.id,
             )
               ? 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white'
@@ -75,7 +78,7 @@
             <p class="mt-2 line-clamp-2 text-sm font-medium dark:text-white">{person.name}</p>
           </button>
         {/each}
-      </div>
+      </SingleGridRow>
 
       {#if showAllPeople || people.length > peopleList.length}
         <div class="flex justify-center mt-2">

web/src/lib/components/shared-components/single-grid-row.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  let className = '';
+  export { className as class };
+  export let itemCount = 1;
+
+  let container: HTMLElement | undefined;
+  let contentRect: DOMRectReadOnly | undefined;
+
+  const getGridGap = (element: Element) => {
+    const style = getComputedStyle(element);
+
+    return {
+      columnGap: parsePixels(style.columnGap),
+    };
+  };
+
+  const parsePixels = (style: string) => Number.parseInt(style, 10) || 0;
+
+  const getItemCount = (container: HTMLElement, containerWidth: number) => {
+    if (!container.firstElementChild) {
+      return 1;
+    }
+
+    const childContentRect = container.firstElementChild.getBoundingClientRect();
+    const childWidth = Math.floor(childContentRect.width || Infinity);
+    const { columnGap } = getGridGap(container);
+
+    return Math.floor((containerWidth + columnGap) / (childWidth + columnGap)) || 1;
+  };
+
+  $: if (container && contentRect) {
+    itemCount = getItemCount(container, contentRect.width);
+  }
+</script>
+
+<div class={className} bind:this={container} bind:contentRect>
+  <slot {itemCount} />
+</div>