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

@@ -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();

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 ~}}