From 3ab7124506c4808592559c9120e0368758a21862 Mon Sep 17 00:00:00 2001
From: "immich-push-o-matic[bot]"
 <179150890+immich-push-o-matic[bot]@users.noreply.github.com>
Date: Tue, 6 Oct 2026 14:42:16 +0000
Subject: [PATCH] fix(web): show face name label above box when it would be
 hidden (#32168)

fix(web): show face name label above box when it would be hidden (#32088)

(cherry picked from commit 3f8cfe0b70ef3807753e5789907138cbd312072a)

Co-authored-by: Joep Admiraal <joep@groovytunes.nl>
---
 web/src/lib/components/asset-viewer/PhotoViewer.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/asset-viewer/PhotoViewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
index bdd02d7ac..468782ede 100644
--- a/web/src/lib/components/asset-viewer/PhotoViewer.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
@@ -61,6 +61,7 @@
 
   let containerWidth = $state(0);
   let containerHeight = $state(0);
+  const faceLabelOffset = 32;
 
   const container = $derived({
     width: containerWidth,
@@ -273,11 +274,14 @@
           onpointerleave={() => assetViewerManager.clearHighlightedFaces()}
         >
           {#if isActive && boundingbox.name}
+            {@const labelAbove =
+              boundingbox.top + boundingbox.height + faceLabelOffset > overlaySize.height &&
+              boundingbox.top >= faceLabelOffset}
             <div
               aria-hidden="true"
               class="absolute rounded-sm bg-white/90 px-2 py-1 text-sm font-medium whitespace-nowrap text-black shadow-lg"
               bind:clientWidth={boundingbox.labelWidth}
-              style="top: {boundingbox.height + 4}px; {assetViewerManager.imgRef
+              style="{labelAbove ? 'bottom' : 'top'}: {boundingbox.height + 4}px; {assetViewerManager.imgRef
                 ? boundingbox.left >= boundingbox.labelWidth - boundingbox.width
                   ? `right: ${Math.max(boundingbox.left + boundingbox.width - assetViewerManager.imgRef.clientWidth, 0)}px;`
                   : `left: ${-boundingbox.left}px;`