fix: face bounding box label alignment (#31793)

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;`
                 : ''}"

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,
     });
   });
 

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;