From 065f7c7d5d630382526e89b288012d4be96a2f49 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 22 May 2025 15:17:14 -0500
Subject: [PATCH] fix: more z-index issue (#18493)

---
 .../asset-viewer/detail-panel.svelte           |  1 +
 .../assets/thumbnail/video-thumbnail.svelte    |  2 +-
 .../components/photos-page/memory-lane.svelte  |  4 ++--
 .../shared-components/map/map.svelte           | 18 +++++++++++-------
 .../[[assetId=id]]/+page.svelte                |  2 +-
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 24329d13bf..4d0c164ae1 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -495,6 +495,7 @@
         zoom={12.5}
         simplified
         useLocationPin
+        showSimpleControls={!showEditFaces}
         onOpenInMapView={() => goto(`${AppRoute.MAP}#12.5/${latlng.lat}/${latlng.lng}`)}
       >
         {#snippet popup({ marker })}
diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index d59a03158a..2c03ca48f8 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -55,7 +55,7 @@
   };
 </script>
 
-<div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+<div class="absolute end-0 top-0 z-1 flex place-items-center gap-1 text-xs font-medium text-white">
   {#if showTime}
     <span class="pt-2">
       {#if remainingSeconds < 60}
diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index 475f6ceef9..bb1e29e4a0 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -45,7 +45,7 @@
     onscroll={onScroll}
   >
     {#if canScrollLeft || canScrollRight}
-      <div class="sticky start-0">
+      <div class="sticky start-0 z-1">
         {#if canScrollLeft}
           <div class="absolute start-4 top-24" transition:fade={{ duration: 200 }}>
             <button
@@ -60,7 +60,7 @@
           </div>
         {/if}
         {#if canScrollRight}
-          <div class="absolute end-4 top-24" transition:fade={{ duration: 200 }}>
+          <div class="absolute end-4 top-24 z-1" transition:fade={{ duration: 200 }}>
             <button
               type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index 6e1e10049d..0c8094a1a1 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -54,6 +54,7 @@
     onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
     popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
     rounded?: boolean;
+    showSimpleControls?: boolean;
   }
 
   let {
@@ -70,6 +71,7 @@
     onClickPoint = () => {},
     popup,
     rounded = false,
+    showSimpleControls = true,
   }: Props = $props();
 
   let map: maplibregl.Map | undefined = $state();
@@ -266,13 +268,15 @@
   bind:map
 >
   {#snippet children({ map }: { map: maplibregl.Map })}
-    <NavigationControl position="top-left" showCompass={!simplified} />
+    {#if showSimpleControls}
+      <NavigationControl position="top-left" showCompass={!simplified} />
 
-    {#if !simplified}
-      <GeolocateControl position="top-left" />
-      <FullscreenControl position="top-left" />
-      <ScaleControl />
-      <AttributionControl compact={false} />
+      {#if !simplified}
+        <GeolocateControl position="top-left" />
+        <FullscreenControl position="top-left" />
+        <ScaleControl />
+        <AttributionControl compact={false} />
+      {/if}
     {/if}
 
     {#if showSettings}
@@ -285,7 +289,7 @@
       </Control>
     {/if}
 
-    {#if onOpenInMapView}
+    {#if onOpenInMapView && showSimpleControls}
       <Control position="top-right">
         <ControlGroup>
           <ControlButton onclick={() => onOpenInMapView()}>
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 1e1dfc254d..8995483c84 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
@@ -452,7 +452,7 @@
             {/if}
           </section>
           {#if isEditingName}
-            <div class="absolute w-64 sm:w-96">
+            <div class="absolute w-64 sm:w-96 z-1">
               {#if isSearchingPeople}
                 <div
                   class="flex border h-14 rounded-b-lg border-gray-400 dark:border-immich-dark-gray place-items-center bg-gray-200 p-2 dark:bg-gray-700"