helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2026-08-15 13:03:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style(web): prevent visual jump of face label by using opacity and resetting labelWidth on hover change

Browse source
This commit is contained in:
priyanshuANDcoad 2026-08-09 00:48:47 +05:30
parent 9cdacf885d
commit 7e5c6662f8
1 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/src/lib/components/asset-viewer/PhotoViewer.svelte
View file

@ -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>