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>

web/src/routes/(user)/explore/+page.svelte

@@ -10,6 +10,7 @@
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { onMount } from 'svelte';
   import { websocketEvents } from '$lib/stores/websocket';
+  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
 
   export let data: PageData;
 
@@ -19,25 +20,14 @@
     OBJECTS = 'smartInfo.objects',
   }
 
-  let MAX_PEOPLE_ITEMS: number;
-  let MAX_PLACE_ITEMS: number;
-  let innerWidth: number;
-  let screenSize: number;
   const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
     const targetField = items.find((item) => item.fieldName === field);
     return targetField?.items || [];
   };
 
-  $: places = getFieldItems(data.items, Field.CITY).slice(0, MAX_PLACE_ITEMS);
+  $: places = getFieldItems(data.items, Field.CITY);
-  $: people = data.response.people.slice(0, MAX_PEOPLE_ITEMS);
+  $: people = data.response.people;
   $: hasPeople = data.response.total > 0;
-  $: {
-    if (innerWidth && screenSize) {
-      // Set the number of faces according to the screen size and the div size
-      MAX_PEOPLE_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 96) : Math.floor(innerWidth / 120);
-      MAX_PLACE_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 150) : Math.floor(innerWidth / 172);
-    }
-  }
 
   onMount(() => {
     return websocketEvents.on('on_person_thumbnail', (personId: string) => {
@@ -52,8 +42,6 @@
   });
 </script>
 
-<svelte:window bind:innerWidth={screenSize} />
-
 <UserPageLayout title={data.meta.title}>
   {#if hasPeople}
     <div class="mb-6 mt-2">
@@ -65,25 +53,17 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <div
+      <SingleGridRow
-        class="flex flex-row {MAX_PEOPLE_ITEMS < 5 ? 'justify-center' : ''} flex-wrap gap-4"
+        class="grid md:grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-x-4"
-        bind:offsetWidth={innerWidth}
+        let:itemCount
       >
-        {#if MAX_PEOPLE_ITEMS}
+        {#each people.slice(0, itemCount) as person (person.id)}
-          {#each people as person (person.id)}
+          <a href="{AppRoute.PEOPLE}/{person.id}" class="text-center">
-            <a href="{AppRoute.PEOPLE}/{person.id}" class="w-20 md:w-24 text-center">
+            <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />
-              <ImageThumbnail
+            <p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
-                circle
+          </a>
-                shadow
+        {/each}
-                url={getPeopleThumbnailUrl(person)}
+      </SingleGridRow>
-                altText={person.name}
-                widthStyle="100%"
-              />
-              <p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
-            </a>
-          {/each}
-        {/if}
-      </div>
     </div>
   {/if}
 
@@ -97,16 +77,17 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <div class="flex flex-row flex-wrap gap-4">
+      <SingleGridRow
-        {#each places as item (item.data.id)}
+        class="grid md:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-x-4"
+        let:itemCount
+      >
+        {#each places.slice(0, itemCount) as item (item.data.id)}
           <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
-            <div
+            <div class="flex justify-center overflow-hidden rounded-xl brightness-75 filter">
-              class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
-            >
               <img
                 src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
                 alt={item.value}
-                class="object-cover w-[156px] h-[156px]"
+                class="object-cover aspect-square w-full"
               />
             </div>
             <span
@@ -116,7 +97,7 @@
             </span>
           </a>
         {/each}
-      </div>
+      </SingleGridRow>
     </div>
   {/if}