fix(web): asset viewer navbar overlapping with details tab and context menu not closing on button press (except in album viewer) (#2323)

* fix overlapping of asset-viewer-nav-bar
with details tab

* fix contextmenu not closing on button press

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>

web/src/lib/components/album-page/album-viewer.svelte

@@ -43,6 +43,7 @@
 	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
 	import Button from '../elements/buttons/button.svelte';
+	import { clickOutside } from '$lib/utils/click-outside';
 
 	export let album: AlbumResponseDto;
 	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -457,11 +458,26 @@
 					{/if}
 
 					{#if !isPublicShared}
-						<CircleIconButton
+						<div use:clickOutside on:outclick={() => (isShowAlbumOptions = false)}>
-							title="Album options"
+							<CircleIconButton
-							on:click={showAlbumOptionsMenu}
+								title="Album options"
-							logo={DotsVertical}
+								on:click={showAlbumOptionsMenu}
-						/>
+								logo={DotsVertical}
+								>{#if isShowAlbumOptions}
+									<ContextMenu {...contextMenuPosition}>
+										{#if isOwned}
+											<MenuOption
+												on:click={() => {
+													isShowThumbnailSelection = true;
+													isShowAlbumOptions = false;
+												}}
+												text="Set album cover"
+											/>
+										{/if}
+									</ContextMenu>
+								{/if}
+							</CircleIconButton>
+						</div>
 					{/if}
 
 					{#if isPublicShared}
@@ -590,20 +606,6 @@
 	/>
 {/if}
 
-{#if isShowAlbumOptions}
-	<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAlbumOptions = false)}>
-		{#if isOwned}
-			<MenuOption
-				on:click={() => {
-					isShowThumbnailSelection = true;
-					isShowAlbumOptions = false;
-				}}
-				text="Set album cover"
-			/>
-		{/if}
-	</ContextMenu>
-{/if}
-
 {#if isShowThumbnailSelection}
 	<ThumbnailSelection
 		{album}

web/src/lib/components/album-page/share-info-modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { AlbumResponseDto, api, UserResponseDto } from '@api';
+	import { clickOutside } from '$lib/utils/click-outside';
 	import BaseModal from '../shared-components/base-modal.svelte';
 	import CircleAvatar from '../shared-components/circle-avatar.svelte';
 	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
@@ -84,13 +85,21 @@
 
 				<div id={`icon-${user.id}`} class="flex place-items-center">
 					{#if isOwned}
-						<CircleIconButton
+						<div use:clickOutside on:outclick={() => (isShowMenu = false)}>
-							on:click={() => showContextMenu(user.id)}
+							<CircleIconButton
-							logo={DotsVertical}
+								on:click={() => showContextMenu(user.id)}
-							backgroundColor={'transparent'}
+								logo={DotsVertical}
-							hoverColor={'#e2e7e9'}
+								backgroundColor={'transparent'}
-							size={'20'}
+								hoverColor={'#e2e7e9'}
-						/>
+								size={'20'}
+							>
+								{#if isShowMenu}
+									<ContextMenu {...position}>
+										<MenuOption on:click={() => removeUser(targetUserId)} text="Remove" />
+									</ContextMenu>
+								{/if}
+							</CircleIconButton>
+						</div>
 					{:else if user.id == currentUser?.id}
 						<button
 							on:click={() => removeUser('me')}
@@ -102,10 +111,4 @@
 			</div>
 		{/each}
 	</section>
-
-	{#if isShowMenu}
-		<ContextMenu {...position} on:clickoutside={() => (isShowMenu = false)}>
-			<MenuOption on:click={() => removeUser(targetUserId)} text="Remove" />
-		</ContextMenu>
-	{/if}
 </BaseModal>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
+	import { clickOutside } from '$lib/utils/click-outside';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
 	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
 	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
@@ -45,12 +46,12 @@
 </script>
 
 <div
-	class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[9999]"
+	class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[1001]"
 >
 	<div>
 		<CircleIconButton logo={ArrowLeft} on:click={() => dispatch('goBack')} />
 	</div>
-	<div class="text-white flex gap-2">
+	<div class="text-white flex gap-2 justify-end w-[calc(100%-3rem)] overflow-hidden">
 		{#if isOwner}
 			<CircleIconButton
 				logo={asset.isArchived ? ArchiveArrowUpOutline : ArchiveArrowDownOutline}
@@ -107,16 +108,21 @@
 
 		{#if isOwner}
 			<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
-			<CircleIconButton logo={DotsVertical} on:click={showOptionsMenu} title="More" />
+			<div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
+				<CircleIconButton logo={DotsVertical} on:click={showOptionsMenu} title="More">
+					{#if isShowAssetOptions}
+						<ContextMenu {...contextMenuPosition}>
+							<div class="flex flex-col rounded-lg ">
+								<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
+								<MenuOption
+									on:click={() => onMenuClick('addToSharedAlbum')}
+									text="Add to Shared Album"
+								/>
+							</div>
+						</ContextMenu>
+					{/if}
+				</CircleIconButton>
+			</div>
 		{/if}
 	</div>
 </div>
-
-{#if isShowAssetOptions}
-	<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAssetOptions = false)}>
-		<div class="flex flex-col rounded-lg ">
-			<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
-			<MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />
-		</div>
-	</ContextMenu>
-{/if}

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

@@ -391,7 +391,7 @@
 		<div
 			transition:fly={{ duration: 150 }}
 			id="detail-panel"
-			class="bg-immich-bg w-[360px] row-span-full transition-all overflow-y-auto dark:bg-immich-dark-bg dark:border-l dark:border-l-immich-dark-gray"
+			class="bg-immich-bg w-[360px] z-[1002] row-span-full transition-all overflow-y-auto dark:bg-immich-dark-bg dark:border-l dark:border-l-immich-dark-gray"
 			translate="yes"
 		>
 			<DetailPanel

web/src/lib/components/elements/buttons/circle-icon-button.svelte

@@ -16,6 +16,7 @@
 	on:click
 >
 	<svelte:component this={logo} {size} />
+	<slot />
 </button>
 
 <style>