From a8c513a95eb706bb26ff79d5044a908fbd415a47 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 8 Apr 2025 13:06:33 +0530
Subject: [PATCH] user_card: Fix mismatch between tooltip and popover trigger
 area.

User card popover was not displayed even when "View user card"
tooltip is visible in some areas. To fix it, we introduce a
wrapper element which has the same trigger area as the tooltip.

We don't directly use the `view_user_card_tooltip` element to
trigger popover since tippy doesn't play nice with two tippy
instances attached to the same element.
---
 web/src/user_card_popover.ts     |  2 +-
 web/templates/message_avatar.hbs | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/user_card_popover.ts b/web/src/user_card_popover.ts
index 945143d797..b77b216e30 100644
--- a/web/src/user_card_popover.ts
+++ b/web/src/user_card_popover.ts
@@ -663,7 +663,7 @@ function toggle_sidebar_user_card_popover($target: JQuery): void {
 function register_click_handlers(): void {
     $("#main_div").on(
         "click",
-        ".sender_name, .inline_profile_picture",
+        ".sender_name, .inline-profile-picture-wrapper",
         function (this: HTMLElement, e) {
             const $row = $(this).closest(".message_row");
             e.stopPropagation();
diff --git a/web/templates/message_avatar.hbs b/web/templates/message_avatar.hbs
index 59bb29adde..f857942ba6 100644
--- a/web/templates/message_avatar.hbs
+++ b/web/templates/message_avatar.hbs
@@ -1,9 +1,11 @@
 <div class="u-{{msg/sender_id}} message-avatar sender_info_hover view_user_card_tooltip no-select" aria-hidden="true" data-is-bot="{{sender_is_bot}}">
-    <div class="inline_profile_picture {{#if sender_is_guest}} guest-avatar{{/if}} {{#if sender_is_deactivated}} deactivated {{/if}}">
-        <img loading="lazy" src="{{small_avatar_url}}" alt="" class="no-drag"/>
-        {{#if sender_is_deactivated}}
-            <i class="fa fa-ban deactivated-user-icon"></i>
-        {{/if}}
+    <div class="inline-profile-picture-wrapper">
+        <div class="inline_profile_picture {{#if sender_is_guest}} guest-avatar{{/if}} {{#if sender_is_deactivated}} deactivated {{/if}}">
+            <img loading="lazy" src="{{small_avatar_url}}" alt="" class="no-drag"/>
+            {{#if sender_is_deactivated}}
+                <i class="fa fa-ban deactivated-user-icon"></i>
+            {{/if}}
+        </div>
     </div>
 </div>
 {{~! remove whitespace ~}}