fix(web): grid on people page (#5640)

* fix: grid on people page

* pr feedback

* wait before width is set

* fix: animation

* fix: use grid instead

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/faces-page/people-card.svelte

@@ -46,7 +46,7 @@
   role="group"
 >
   <a href="{AppRoute.PEOPLE}/{person.id}?previousRoute={AppRoute.PEOPLE}" draggable="false">
-    <div class="h-48 w-48 rounded-xl brightness-95 filter">
+    <div class="w-full h-full rounded-xl brightness-95 filter">
       <ImageThumbnail
         shadow
         {preload}

web/src/lib/components/faces-page/show-hide.svelte

@@ -16,10 +16,11 @@
 
   export let showLoadingSpinner: boolean;
   export let toggleVisibility: boolean;
+  export let screenHeight: number;
 </script>
 
 <section
-  transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+  transition:fly={{ y: screenHeight, duration: 150, easing: quintOut, opacity: 1 }}
   class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
 >
   <div

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

@@ -45,6 +45,8 @@
   let potentialMergePeople: PersonResponseDto[] = [];
   let edittingPerson: PersonResponseDto | null = null;
 
+  let innerHeight: number;
+
   people.forEach((person: PersonResponseDto) => {
     initialHiddenValues[person.id] = person.isHidden;
   });
@@ -344,6 +346,8 @@
   };
 </script>
 
+<svelte:window bind:innerHeight />
+
 {#if showMergeModal}
   <FullScreenModal on:clickOutside={() => (showMergeModal = false)}>
     <MergeSuggestionModal
@@ -370,21 +374,19 @@
   </svelte:fragment>
 
   {#if countVisiblePeople > 0}
-    <div class="pl-4">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
-      <div class="flex flex-row flex-wrap gap-1">
+      {#each people as person, idx (person.id)}
-        {#each people as person, idx (person.id)}
+        {#if !person.isHidden}
-          {#if !person.isHidden}
+          <PeopleCard
-            <PeopleCard
+            {person}
-              {person}
+            preload={idx < 20}
-              preload={idx < 20}
+            on:change-name={() => handleChangeName(person)}
-              on:change-name={() => handleChangeName(person)}
+            on:set-birth-date={() => handleSetBirthDate(person)}
-              on:set-birth-date={() => handleSetBirthDate(person)}
+            on:merge-people={() => handleMergePeople(person)}
-              on:merge-people={() => handleMergePeople(person)}
+            on:hide-person={() => handleHidePerson(person)}
-              on:hide-person={() => handleHidePerson(person)}
+          />
-            />
+        {/if}
-          {/if}
+      {/each}
-        {/each}
-      </div>
     </div>
   {:else}
     <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
@@ -444,29 +446,32 @@
     on:change={handleToggleVisibility}
     bind:showLoadingSpinner
     bind:toggleVisibility
+    screenHeight={innerHeight}
   >
-    {#each people as person, idx (person.id)}
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
-      <button
+      {#each people as person, idx (person.id)}
-        class="relative h-36 w-36 md:h-48 md:w-48"
+        <button
-        on:click={() => (person.isHidden = !person.isHidden)}
+          class="relative"
-        on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
+          on:click={() => (person.isHidden = !person.isHidden)}
-        on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
+          on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
-      >
+          on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
-        <ImageThumbnail
+        >
-          preload={idx < 20}
+          <ImageThumbnail
-          bind:hidden={person.isHidden}
+            preload={idx < 20}
-          shadow
+            bind:hidden={person.isHidden}
-          url={api.getPeopleThumbnailUrl(person.id)}
+            shadow
-          altText={person.name}
+            url={api.getPeopleThumbnailUrl(person.id)}
-          widthStyle="100%"
+            altText={person.name}
-          bind:eyeColor={eyeColorMap[person.id]}
+            widthStyle="100%"
-        />
+            bind:eyeColor={eyeColorMap[person.id]}
-        {#if person.name}
+          />
-          <span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white">
+          {#if person.name}
-            {person.name}
+            <span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white">
-          </span>
+              {person.name}
-        {/if}
+            </span>
-      </button>
+          {/if}
-    {/each}
+        </button>
+      {/each}
+    </div>
   </ShowHide>
 {/if}