From 87e76d89126d140c05c82a58fabcae7904c2500f Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Fri, 25 Sep 2026 18:40:25 +0200
Subject: [PATCH] fix: face bounding box label alignment (#31793)

---
 web/src/lib/components/asset-viewer/PhotoViewer.svelte | 3 ++-
 web/src/lib/utils/people-utils.spec.ts                 | 2 ++
 web/src/lib/utils/people-utils.ts                      | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/PhotoViewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
index 176048005..61c819557 100644
--- a/web/src/lib/components/asset-viewer/PhotoViewer.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
@@ -273,8 +273,9 @@
             <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
-                ? boundingbox.left >= 0
+                ? boundingbox.left >= boundingbox.labelWidth - boundingbox.width
                   ? `right: ${Math.max(boundingbox.left + boundingbox.width - assetViewerManager.imgRef.clientWidth, 0)}px;`
                   : `left: ${-boundingbox.left}px;`
                 : ''}"
diff --git a/web/src/lib/utils/people-utils.spec.ts b/web/src/lib/utils/people-utils.spec.ts
index 0601f5022..70c3fa9fc 100644
--- a/web/src/lib/utils/people-utils.spec.ts
+++ b/web/src/lib/utils/people-utils.spec.ts
@@ -27,6 +27,7 @@ describe('getBoundingBox', () => {
       left: 800 * (1000 / 4000),
       width: 800 * (2000 / 4000) - 800 * (1000 / 4000),
       height: 600 * (1500 / 3000) - 600 * (750 / 3000),
+      labelWidth: 800 * (2000 / 4000) - 800 * (1000 / 4000),
     });
   });
 
@@ -49,6 +50,7 @@ describe('getBoundingBox', () => {
       left: 0,
       width: 600,
       height: 600,
+      labelWidth: 600,
     });
   });
 
diff --git a/web/src/lib/utils/people-utils.ts b/web/src/lib/utils/people-utils.ts
index 9d7b8be79..104872bd1 100644
--- a/web/src/lib/utils/people-utils.ts
+++ b/web/src/lib/utils/people-utils.ts
@@ -3,7 +3,7 @@ import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
 import { getAssetMediaUrl } from '$lib/utils';
 import { mapNormalizedRectToContent, type Rect, type Size } from '$lib/utils/container-utils';
 
-export type BoundingBox = Rect & { id: string };
+export type BoundingBox = Rect & { id: string; labelWidth: number };
 
 export const getBoundingBox = (faces: Faces[], imageSize: Size): BoundingBox[] => {
   const boxes: BoundingBox[] = [];
@@ -15,7 +15,7 @@ export const getBoundingBox = (faces: Faces[], imageSize: Size): BoundingBox[] =
       imageSize,
     );
 
-    boxes.push({ id: face.id, ...rect });
+    boxes.push({ id: face.id, ...rect, labelWidth: rect.width });
   }
 
   return boxes;