From 15e894b9b54a4b2a7cf34a84c043be02306a507a Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Tue, 13 May 2025 22:25:57 +0200
Subject: [PATCH] fix: z-index issues (#18275)

---
 .../faces-page/merge-suggestion-modal.svelte  |  4 +-
 .../components/faces-page/people-card.svelte  |  2 +-
 .../[[assetId=id]]/+page.svelte               | 64 +++++++++----------
 .../admin/library-management/+page.svelte     | 38 +++++------
 4 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
index d4f8a6f416..3aedfd3450 100644
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { onMount, tick } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { type PersonResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { mdiArrowLeft, mdiMerge } from '@mdi/js';
+  import { onMount, tick } from 'svelte';
+  import { t } from 'svelte-i18n';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     personMerge1: PersonResponseDto;
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index b740953340..fe2fd72e8e 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -62,7 +62,7 @@
   </a>
 
   {#if showVerticalDots}
-    <div class="absolute top-2 end-2">
+    <div class="absolute top-2 end-2 z-[1]">
       <ButtonContextMenu
         buttonClass="icon-white-drop-shadow focus:opacity-100 {showVerticalDots ? 'opacity-100' : 'opacity-0'}"
         color="opaque"
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index c3870449a6..bfc7a9eb85 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -369,38 +369,6 @@
   });
 </script>
 
-{#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
-  <UnMergeFaceSelector
-    assetIds={assetInteraction.selectedAssets.map((a) => a.id)}
-    personAssets={person}
-    onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
-    onConfirm={handleUnmerge}
-  />
-{/if}
-
-{#if viewMode === PersonPageViewMode.SUGGEST_MERGE && personMerge1 && personMerge2}
-  <MergeSuggestionModal
-    {personMerge1}
-    {personMerge2}
-    {potentialMergePeople}
-    onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
-    onReject={changeName}
-    onConfirm={handleMergeSamePerson}
-  />
-{/if}
-
-{#if viewMode === PersonPageViewMode.BIRTH_DATE}
-  <SetBirthDateModal
-    birthDate={person.birthDate ?? ''}
-    onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
-    onUpdate={handleSetBirthDate}
-  />
-{/if}
-
-{#if viewMode === PersonPageViewMode.MERGE_PEOPLE}
-  <MergeFaceSelector {person} onBack={handleGoBack} onMerge={handleMerge} />
-{/if}
-
 <main
   class="relative h-dvh overflow-hidden tall:ms-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)]"
   use:scrollMemoryClearer={{
@@ -527,6 +495,38 @@
   {/key}
 </main>
 
+{#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
+  <UnMergeFaceSelector
+    assetIds={assetInteraction.selectedAssets.map((a) => a.id)}
+    personAssets={person}
+    onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
+    onConfirm={handleUnmerge}
+  />
+{/if}
+
+{#if viewMode === PersonPageViewMode.SUGGEST_MERGE && personMerge1 && personMerge2}
+  <MergeSuggestionModal
+    {personMerge1}
+    {personMerge2}
+    {potentialMergePeople}
+    onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
+    onReject={changeName}
+    onConfirm={handleMergeSamePerson}
+  />
+{/if}
+
+{#if viewMode === PersonPageViewMode.BIRTH_DATE}
+  <SetBirthDateModal
+    birthDate={person.birthDate ?? ''}
+    onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
+    onUpdate={handleSetBirthDate}
+  />
+{/if}
+
+{#if viewMode === PersonPageViewMode.MERGE_PEOPLE}
+  <MergeFaceSelector {person} onBack={handleGoBack} onMerge={handleMerge} />
+{/if}
+
 <header>
   {#if assetInteraction.selectionActive}
     <AssetSelectControlBar
diff --git a/web/src/routes/admin/library-management/+page.svelte b/web/src/routes/admin/library-management/+page.svelte
index e5d635bf18..f8e643bf88 100644
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -240,25 +240,6 @@
   };
 </script>
 
-{#if toCreateLibrary}
-  <LibraryUserPickerForm onSubmit={handleCreate} onCancel={() => (toCreateLibrary = false)} />
-{/if}
-
-{#if toAddImportPath}
-  <LibraryImportPathForm
-    title={$t('add_import_path')}
-    submitText={$t('add')}
-    bind:importPath={importPathToAdd}
-    onSubmit={handleAddImportPath}
-    onCancel={() => {
-      toAddImportPath = false;
-      if (updateLibraryIndex) {
-        onEditImportPathClicked(updateLibraryIndex);
-      }
-    }}
-  />
-{/if}
-
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
     <div class="flex justify-end gap-2">
@@ -391,3 +372,22 @@
     onCancel={() => (renameLibrary = undefined)}
   />
 {/if}
+
+{#if toCreateLibrary}
+  <LibraryUserPickerForm onSubmit={handleCreate} onCancel={() => (toCreateLibrary = false)} />
+{/if}
+
+{#if toAddImportPath}
+  <LibraryImportPathForm
+    title={$t('add_import_path')}
+    submitText={$t('add')}
+    bind:importPath={importPathToAdd}
+    onSubmit={handleAddImportPath}
+    onCancel={() => {
+      toAddImportPath = false;
+      if (updateLibraryIndex) {
+        onEditImportPathClicked(updateLibraryIndex);
+      }
+    }}
+  />
+{/if}