fix: scroll jump when opening show & hide people (#25932)

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -105,72 +105,74 @@
 
 <svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
 
-<div
+<div class="h-full overflow-y-auto">
-  class="fixed top-0 z-1 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
+  <div
->
+    class="sticky top-0 z-1 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
-  <div class="flex items-center">
+  >
-    <IconButton
+    <div class="flex items-center">
-      shape="round"
-      color="secondary"
-      variant="ghost"
-      aria-label={$t('close')}
-      icon={mdiClose}
-      onclick={onClose}
-    />
-    <div class="flex gap-2 items-center">
-      <p id={titleId} class="ms-2">{$t('show_and_hide_people')}</p>
-      <p class="text-sm text-gray-400 dark:text-gray-600">({totalPeopleCount.toLocaleString($locale)})</p>
-    </div>
-  </div>
-  <div class="flex items-center justify-end">
-    <div class="flex items-center md:me-4">
       <IconButton
         shape="round"
         color="secondary"
         variant="ghost"
-        aria-label={$t('reset_people_visibility')}
+        aria-label={$t('close')}
-        icon={mdiRestart}
+        icon={mdiClose}
-        onclick={() => overrides.clear()}
+        onclick={onClose}
-      />
-      <IconButton
-        shape="round"
-        color="secondary"
-        variant="ghost"
-        aria-label={toggleButton.label}
-        icon={toggleButton.icon}
-        onclick={handleToggleVisibility}
       />
+      <div class="flex gap-2 items-center">
+        <p id={titleId} class="ms-2">{$t('show_and_hide_people')}</p>
+        <p class="text-sm text-gray-400 dark:text-gray-600">({totalPeopleCount.toLocaleString($locale)})</p>
+      </div>
     </div>
-    <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
+    <div class="flex items-center justify-end">
-  </div>
+      <div class="flex items-center md:me-4">
-</div>
+        <IconButton
-
+          shape="round"
-<div class="flex flex-wrap gap-1 p-2 pb-8 md:px-8 mt-16">
+          color="secondary"
-  <PeopleInfiniteScroll {people} hasNextPage={true} {loadNextPage}>
+          variant="ghost"
-    {#snippet children({ person })}
+          aria-label={$t('reset_people_visibility')}
-      {@const hidden = overrides.get(person.id) ?? person.isHidden}
+          icon={mdiRestart}
-      <button
+          onclick={() => overrides.clear()}
-        type="button"
-        class="group relative w-full h-full"
-        onclick={() => setHiddenOverride(person, !hidden)}
-        aria-pressed={hidden}
-        aria-label={person.name ? $t('hide_named_person', { values: { name: person.name } }) : $t('hide_person')}
-      >
-        <ImageThumbnail
-          {hidden}
-          shadow
-          url={getPeopleThumbnailUrl(person)}
-          altText={person.name}
-          widthStyle="100%"
-          hiddenIconClass="text-white group-hover:text-black transition-colors"
-          preload={false}
         />
-        {#if person.name}
+        <IconButton
-          <span class="absolute bottom-2 start-0 w-full select-text px-1 text-center font-medium text-white">
+          shape="round"
-            {person.name}
+          color="secondary"
-          </span>
+          variant="ghost"
-        {/if}
+          aria-label={toggleButton.label}
-      </button>
+          icon={toggleButton.icon}
-    {/snippet}
+          onclick={handleToggleVisibility}
-  </PeopleInfiniteScroll>
+        />
+      </div>
+      <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
+    </div>
+  </div>
+
+  <div class="flex flex-wrap gap-1 p-2 pb-8 md:px-8">
+    <PeopleInfiniteScroll {people} hasNextPage={true} {loadNextPage}>
+      {#snippet children({ person })}
+        {@const hidden = overrides.get(person.id) ?? person.isHidden}
+        <button
+          type="button"
+          class="group relative w-full h-full"
+          onclick={() => setHiddenOverride(person, !hidden)}
+          aria-pressed={hidden}
+          aria-label={person.name ? $t('hide_named_person', { values: { name: person.name } }) : $t('hide_person')}
+        >
+          <ImageThumbnail
+            {hidden}
+            shadow
+            url={getPeopleThumbnailUrl(person)}
+            altText={person.name}
+            widthStyle="100%"
+            hiddenIconClass="text-white group-hover:text-black transition-colors"
+            preload={false}
+          />
+          {#if person.name}
+            <span class="absolute bottom-2 start-0 w-full select-text px-1 text-center font-medium text-white">
+              {person.name}
+            </span>
+          {/if}
+        </button>
+      {/snippet}
+    </PeopleInfiniteScroll>
+  </div>
 </div>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { focusTrap } from '$lib/actions/focus-trap';
   import { scrollMemory } from '$lib/actions/scroll-memory';
   import { shortcut } from '$lib/actions/shortcut';
   import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-visibility.svelte';
@@ -381,12 +380,10 @@
 
 {#if selectHidden}
   <dialog
-    open
     transition:fly={{ y: innerHeight, duration: 150, easing: quintOut, opacity: 0 }}
-    class="absolute start-0 top-0 h-full w-full bg-light"
+    class="fixed inset-0 h-full w-full max-w-none max-h-none bg-light"
-    aria-modal="true"
     aria-labelledby="manage-visibility-title"
-    use:focusTrap
+    {@attach (dialog) => dialog.showModal()}
   >
     <ManagePeopleVisibility
       {people}