From bf04a9fc35f76c4bf76a06b816ca6227d83979fd Mon Sep 17 00:00:00 2001
From: "immich-push-o-matic[bot]"
 <179150890+immich-push-o-matic[bot]@users.noreply.github.com>
Date: Mon, 5 Oct 2026 15:24:15 +0000
Subject: [PATCH] fix: bounding box label clipping due to reactivity issue
 (#32107)

fix: bounding box label clipping due to reactivity issue (#32090)

(cherry picked from commit a01a9140b6f1a01e2c80278d5cc2505e1fd1a12d)

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
---
 .../lib/components/asset-viewer/PhotoViewer.svelte    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/PhotoViewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
index 61c819557..bdd02d7ac 100644
--- a/web/src/lib/components/asset-viewer/PhotoViewer.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
@@ -173,9 +173,12 @@
 
   const faces = $derived(Array.from(faceToNameMap.keys()));
 
-  const boundingBoxes = $derived.by(() => {
+  // we want to bind to `boundingbox.labelWidth`, which requires deep reactivity
+  // $derived does not currently support that, only $state does.
+  let boundingBoxes = $state<Array<BoundingBox & { name?: string; face: Faces }>>([]);
+  $effect(() => {
     if (assetViewerManager.isFaceEditMode || ocrManager.showOverlay) {
-      return [];
+      return;
     }
 
     const knownBoxes = getBoundingBox(faces, overlaySize);
@@ -186,7 +189,7 @@
     }));
 
     if (assetViewerManager.highlightedFaces.length === 0) {
-      return result;
+      boundingBoxes = result;
     }
 
     const knownIds = new Set(faces.map((f) => f.id));
@@ -196,7 +199,7 @@
       result.push({ ...unassignedBoxes[i], face: unassignedFaces[i], name: undefined });
     }
 
-    return result;
+    boundingBoxes = result;
   });
 </script>