fix(web): prevent interaction with detail panel behind person side panel (#27309)

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -37,6 +37,7 @@
     mdiPlus,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
@@ -52,7 +53,6 @@
 
   let { asset, currentAlbum = null }: Props = $props();
 
-  let showEditFaces = $derived(assetViewerManager.isEditFacesPanelOpen);
   let isOwner = $derived(authManager.authenticated && authManager.user.id === asset.ownerId);
   let people = $derived(asset.people || []);
   let unassignedFaces = $derived(asset.unassignedFaces || []);
@@ -118,10 +118,15 @@
     // Remove the last part of the path to get the parent path
     return Route.folders({ path: getParentPath(asset.originalPath) });
   };
+
+  onDestroy(() => {
+    assetViewerManager.closeEditFacesPanel();
+  });
 </script>
 
 <OnEvents onAlbumAddAssets={() => (albums = refreshAlbums())} />
 
+{#if !assetViewerManager.isEditFacesPanelOpen}
   <section class="relative p-2">
     <div class="flex place-items-center gap-2">
       <IconButton
@@ -412,7 +417,7 @@
           zoom={12.5}
           simplified
           useLocationPin
-        showSimpleControls={!showEditFaces}
+          showSimpleControls={!assetViewerManager.isEditFacesPanelOpen}
           onOpenInMapView={() => goto(Route.map({ ...latlng, zoom: 12.5 }))}
         >
           {#snippet popup({ marker })}
@@ -489,8 +494,9 @@
       <DetailPanelTags {asset} {isOwner} />
     </section>
   {/if}
+{/if}
 
-{#if showEditFaces}
+{#if assetViewerManager.isEditFacesPanelOpen}
   <PersonSidePanel
     assetId={asset.id}
     assetType={asset.type}

web/src/lib/managers/asset-viewer-manager.svelte.ts

@@ -209,7 +209,6 @@ class AssetViewerManager extends BaseEventManager<Events> {
     this.closeFaceEditMode();
     this.closeEditFacesPanel();
   }
-
   setAsset(asset: AssetResponseDto) {
     this.#viewingAssetStoreState = asset;
     this.#viewState = true;