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,8 +374,7 @@
   </svelte:fragment>
 
   {#if countVisiblePeople > 0}
-    <div class="pl-4">
-      <div class="flex flex-row flex-wrap gap-1">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
       {#each people as person, idx (person.id)}
         {#if !person.isHidden}
           <PeopleCard
@@ -385,7 +388,6 @@
         {/if}
       {/each}
     </div>
-    </div>
   {:else}
     <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
       <div class="flex flex-col content-center items-center text-center">
@@ -444,10 +446,12 @@
     on:change={handleToggleVisibility}
     bind:showLoadingSpinner
     bind:toggleVisibility
+    screenHeight={innerHeight}
   >
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
       {#each people as person, idx (person.id)}
         <button
-        class="relative h-36 w-36 md:h-48 md:w-48"
+          class="relative"
           on:click={() => (person.isHidden = !person.isHidden)}
           on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
           on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
@@ -468,5 +472,6 @@
           {/if}
         </button>
       {/each}
+    </div>
   </ShowHide>
 {/if}