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

This commit is contained in:
Michel Heusschen 2026-02-08 18:19:35 +01:00 committed by GitHub
parent 00486cbcc8
commit 59c4a49ffd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 65 additions and 66 deletions

View file

@ -105,9 +105,10 @@
<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} /> <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"> <div class="flex items-center">
<IconButton <IconButton
shape="round" shape="round"
@ -143,9 +144,9 @@
</div> </div>
<Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button> <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-1 p-2 pb-8 md:px-8 mt-16"> <div class="flex flex-wrap gap-1 p-2 pb-8 md:px-8">
<PeopleInfiniteScroll {people} hasNextPage={true} {loadNextPage}> <PeopleInfiniteScroll {people} hasNextPage={true} {loadNextPage}>
{#snippet children({ person })} {#snippet children({ person })}
{@const hidden = overrides.get(person.id) ?? person.isHidden} {@const hidden = overrides.get(person.id) ?? person.isHidden}
@ -173,4 +174,5 @@
</button> </button>
{/snippet} {/snippet}
</PeopleInfiniteScroll> </PeopleInfiniteScroll>
</div>
</div> </div>

View file

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { focusTrap } from '$lib/actions/focus-trap';
import { scrollMemory } from '$lib/actions/scroll-memory'; import { scrollMemory } from '$lib/actions/scroll-memory';
import { shortcut } from '$lib/actions/shortcut'; import { shortcut } from '$lib/actions/shortcut';
import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-visibility.svelte'; import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-visibility.svelte';
@ -381,12 +380,10 @@
{#if selectHidden} {#if selectHidden}
<dialog <dialog
open
transition:fly={{ y: innerHeight, duration: 150, easing: quintOut, opacity: 0 }} 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" aria-labelledby="manage-visibility-title"
use:focusTrap {@attach (dialog) => dialog.showModal()}
> >
<ManagePeopleVisibility <ManagePeopleVisibility
{people} {people}