From 5f63ee7a99bb33c7c7629c1d82d51e0b2b3f4c08 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Wed, 21 May 2025 08:23:03 +0700
Subject: [PATCH] Fixed the mouse pointer over the Avatar (#9000)

---
 packages/theme/styles/_layouts.scss           |  3 ++-
 packages/theme/styles/components.scss         | 19 +++++++------------
 .../src/components/Avatar.svelte              | 10 +---------
 .../src/components/AvatarInstance.svelte      | 19 ++-----------------
 4 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index a6986f578e..f0220b81c6 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -320,7 +320,8 @@ input.search {
 .flex-presenter, .inline-presenter {
   flex-wrap: nowrap;
   min-width: 0;
-  cursor: pointer;
+
+  &:not(.no-pointer) { cursor: pointer; }
 
   .icon {
     color: var(--theme-dark-color);
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 0d5e1f34fc..84624d3e26 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -128,18 +128,7 @@
   flex-shrink: 0;
   aspect-ratio: 1;
   background-color: var(--theme-button-default);
-  pointer-events: none;
-
-  &.clickable {
-    cursor: pointer;
-    pointer-events: auto;
-
-    & > * {
-      pointer-events: none;
-      user-select: none;
-      -webkit-user-drag: none;
-    }
-  }
+  // pointer-events: none;
 
   &.withStatus {
     mask-repeat: no-repeat;
@@ -211,6 +200,12 @@
       transform: translate(-50%, -50%);
     }
   }
+
+  & > * {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
 }
 
 /* Avatar sizes */
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index a2969e67ec..1578aff712 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/plugins/contact-resources/src/components/Avatar.svelte
@@ -123,7 +123,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="flex-presenter" use:tooltip={getPreviewPopup(person, showPreview)} on:click>
+<div class="flex-presenter" class:no-pointer={!clickable} use:tooltip={getPreviewPopup(person, showPreview)} on:click>
   {#if showStatus && person}
     <div class="relative">
       <AvatarInstance
@@ -140,7 +140,6 @@
         {adaptiveName}
         {disabled}
         {style}
-        {clickable}
         withStatus
       />
       <div
@@ -164,13 +163,6 @@
       {adaptiveName}
       {disabled}
       {style}
-      {clickable}
     />
   {/if}
 </div>
-
-<style>
-  .flex-presenter {
-    cursor: pointer;
-  }
-</style>
diff --git a/plugins/contact-resources/src/components/AvatarInstance.svelte b/plugins/contact-resources/src/components/AvatarInstance.svelte
index d0ca2f32b8..96e16263a0 100644
--- a/plugins/contact-resources/src/components/AvatarInstance.svelte
+++ b/plugins/contact-resources/src/components/AvatarInstance.svelte
@@ -34,7 +34,6 @@
   export let adaptiveName: boolean = false
   export let disabled: boolean = false
   export let style: 'modern' | undefined = undefined
-  export let clickable: boolean = false
 
   function handleClick (): void {
     dispatch('click')
@@ -73,7 +72,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={element}
-    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style} {clickable ? 'clickable' : ''}"
+    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style}"
     class:no-img={!hasImg && color}
     class:bordered={!hasImg && color === undefined}
     class:border={bColor !== undefined}
@@ -97,7 +96,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={element}
-    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style} {clickable ? 'clickable' : ''}"
+    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style}"
     class:no-img={!hasImg && color}
     class:bordered={!hasImg && color === undefined}
     class:border={bColor !== undefined}
@@ -131,17 +130,3 @@
     {/if}
   </div>
 {/if}
-
-<style>
-  .clickable {
-    cursor: pointer;
-  }
-  .clickable > * {
-    pointer-events: none;
-  }
-  .clickable img {
-    pointer-events: none;
-    user-select: none;
-    -webkit-user-drag: none;
-  }
-</style>