From 42919ed2e16c9b71b8c3d5dd0fb3c6378d53e912 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 7 Jul 2023 10:26:25 -0500
Subject: [PATCH] message_avatar: Preserve clickable area from image to user
 name.

---
 web/src/popovers.js              | 4 ++--
 web/styles/message_row.css       | 2 +-
 web/templates/message_avatar.hbs | 6 ++++--
 web/tests/popovers.test.js       | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/popovers.js b/web/src/popovers.js
index 5221e3460c..2828bfae3c 100644
--- a/web/src/popovers.js
+++ b/web/src/popovers.js
@@ -667,7 +667,7 @@ export function user_info_popover_manage_menu_handle_keyboard(key) {
 
 export function show_sender_info() {
     const $message = $(".selected_message");
-    let $sender = $message.find(".inline_profile_picture");
+    let $sender = $message.find(".message-avatar");
     if ($sender.length === 0) {
         // Messages without an avatar have an invisible message_sender
         // element that's roughly in the right place.
@@ -732,7 +732,7 @@ export function hide_playground_links_popover() {
 export function register_click_handlers() {
     $("#main_div").on(
         "click",
-        ".sender_name, .sender_name-in-status, .inline_profile_picture",
+        ".sender_name, .sender_name-in-status, .message-avatar",
         function (e) {
             const $row = $(this).closest(".message_row");
             e.stopPropagation();
diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index c7323340f4..cc54ebb37c 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -281,7 +281,7 @@ $time_column_max_width: 150px;
                 }
             }
 
-            .inline_profile_picture {
+            .message-avatar {
                 grid-area: avatar;
                 /* The picture should not participate in the baseline group. */
                 align-self: start;
diff --git a/web/templates/message_avatar.hbs b/web/templates/message_avatar.hbs
index 68d0a82f5b..f26c3152a8 100644
--- a/web/templates/message_avatar.hbs
+++ b/web/templates/message_avatar.hbs
@@ -1,4 +1,6 @@
-<div class="u-{{msg/sender_id}} sender_info_hover inline_profile_picture {{#sender_is_guest}} guest-avatar{{/sender_is_guest}} view_user_card_tooltip" aria-hidden="true" data-tooltip-template-id="view-user-card-tooltip-template">
-    <img src="{{small_avatar_url}}" alt="" class="no-drag"/>
+<div class="u-{{msg/sender_id}} message-avatar sender_info_hover view_user_card_tooltip" aria-hidden="true" data-tooltip-template-id="view-user-card-tooltip-template">
+    <div class="inline_profile_picture {{#sender_is_guest}} guest-avatar{{/sender_is_guest}}">
+        <img src="{{small_avatar_url}}" alt="" class="no-drag"/>
+    </div>
 </div>
 {{~! remove whitespace ~}}
diff --git a/web/tests/popovers.test.js b/web/tests/popovers.test.js
index fbbd9f279d..42465ca532 100644
--- a/web/tests/popovers.test.js
+++ b/web/tests/popovers.test.js
@@ -111,7 +111,7 @@ test_ui("sender_hover", ({override, mock_template}) => {
     page_params.is_spectator = false;
     override($.fn, "popover", noop);
 
-    const selection = ".sender_name, .sender_name-in-status, .inline_profile_picture";
+    const selection = ".sender_name, .sender_name-in-status, .message-avatar";
     const handler = $("#main_div").get_on_handler("click", selection);
 
     const message = {