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"