feat(web): responsive people scroll

web/src/lib/components/album-page/album-card-group.svelte

@@ -65,9 +65,10 @@
 
 <div class="mt-4">
   {#if !isCollapsed}
-    <div class="grid grid-auto-fill-56 gap-y-4" transition:slide={{ duration: 300 }}>
+    <div class="flex flex-wrap" transition:slide={{ duration: 300 }}>
       {#each albums as album, index (album.id)}
         <a
+          class="w-[250px]"
           data-sveltekit-preload-data="hover"
           href="{AppRoute.ALBUMS}/{album.id}"
           animate:flip={{ duration: 400 }}

web/src/lib/components/faces-page/people-infinite-scroll.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { intersectionObserver } from '$lib/actions/intersection-observer';
   import type { PersonResponseDto } from '@immich/sdk';
 
   interface Props {
@@ -9,32 +10,32 @@
   }
 
   let { people, hasNextPage = undefined, loadNextPage, children }: Props = $props();
-
-  let lastPersonContainer: HTMLElement | undefined = $state();
-
-  const intersectionObserver = new IntersectionObserver((entries) => {
-    const entry = entries.find((entry) => entry.target === lastPersonContainer);
-    if (entry?.isIntersecting) {
-      loadNextPage();
-    }
-  });
-
-  $effect(() => {
-    if (lastPersonContainer) {
-      intersectionObserver.disconnect();
-      intersectionObserver.observe(lastPersonContainer);
-    }
-  });
 </script>
 
-<div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-10 gap-1">
+<section class="w-full flex flex-wrap gap-2">
   {#each people as person, index (person.id)}
     {#if hasNextPage && index === people.length - 1}
-      <div bind:this={lastPersonContainer}>
+      <div
+        class="flex-none max-md:w-[100px] w-[122px]"
+        use:intersectionObserver={{
+          onIntersect: loadNextPage,
+        }}
+      >
         {@render children?.({ person, index })}
       </div>
     {:else}
-      {@render children?.({ person, index })}
+      <div class="flex-none max-md:w-[100px] w-[122px]">
+        {@render children?.({ person, index })}
+      </div>
     {/if}
   {/each}
-</div>
+</section>
+
+<style>
+  section::after {
+    content: '';
+    flex: auto;
+    flex-basis: 122px;
+    flex-grow: 0;
+  }
+</style>

web/src/lib/components/layouts/user-page-layout.svelte

@@ -62,7 +62,7 @@
   <section class="relative">
     {#if title || buttons}
       <div
-        class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
+        class="absolute flex h-16 gap-2 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
       >
         <div class="flex gap-2 items-center">
           {#if title}

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

@@ -29,7 +29,7 @@
     </div>
   {/snippet}
 
-  <div class="xl:hidden">
+  <div class="xl:hidden flex gap-2">
     <div class="w-fit h-14 dark:text-immich-dark-fg py-2">
       <GroupTab
         label={$t('show_albums')}
@@ -38,7 +38,7 @@
         onSelect={(selected) => ($albumViewSettings.filter = selected)}
       />
     </div>
-    <div class="w-60">
+    <div class="w-fit h-14 py-2">
       <SearchBar placeholder={$t('search_albums')} bind:name={searchQuery} showLoadingSpinner={false} />
     </div>
   </div>