From 7e5c6662f8c54e417d5b0de806d599c0bd32ff48 Mon Sep 17 00:00:00 2001
From: priyanshuANDcoad <priyanshu23154050@akgec.ac.in>
Date: Sun, 9 Aug 2026 00:48:47 +0530
Subject: [PATCH] style(web): prevent visual jump of face label by using
 opacity and resetting labelWidth on hover change

---
 .../lib/components/asset-viewer/PhotoViewer.svelte    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/PhotoViewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
index 06a58f999e..36f21c3411 100644
--- a/web/src/lib/components/asset-viewer/PhotoViewer.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
@@ -64,6 +64,13 @@
   // Only one face label is visible at a time (isActive guard), so a single shared width is sufficient.
   let labelWidth = $state(0);
 
+  $effect(() => {
+    // Reset label width when highlighted faces change to prevent carry-over from previous face labels
+    if (assetViewerManager.highlightedFaces) {
+      labelWidth = 0;
+    }
+  });
+
   const container = $derived({
     width: containerWidth,
     height: containerHeight,
@@ -280,8 +287,8 @@
             <div
               aria-hidden="true"
               bind:clientWidth={labelWidth}
-              class="absolute rounded-sm bg-white/90 px-2 py-1 text-sm font-medium whitespace-nowrap text-black shadow-lg"
-              style="top: {boundingbox.height + 4}px; left: {labelLeft}px;"
+              class="absolute rounded-sm bg-white/90 px-2 py-1 text-sm font-medium whitespace-nowrap text-black shadow-lg transition-opacity duration-75"
+              style="top: {boundingbox.height + 4}px; left: {labelLeft}px; opacity: {labelWidth > 0 ? 1 : 0};"
             >
               {boundingbox.name}
             </div>