user_card_popover: Fix bot owner field overflowing for long names.

This commit fixes the overflowing issue for long bot owner names in the
user card popover, and also repositions the bot owner user card popover
to align with the bot owner name on the bot user card popover.

web/src/user_card_popover.js

@@ -692,6 +692,15 @@ function register_click_handlers() {
         e.preventDefault();
     });
 
+    $("body").on("click", ".view_bot_owner_user_profile", (e) => {
+        const user_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10);
+        const user = people.get_by_user_id(user_id);
+        const $target = $(e.currentTarget).closest(".popover-menu-user-type");
+        toggle_user_card_popover($target, user);
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
     $("body").on("click", ".view_user_profile, .person_picker .pill[data-user-id]", (e) => {
         const user_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10);
         const user = people.get_by_user_id(user_id);

web/styles/popovers.css

@@ -992,6 +992,7 @@ ul.popover-group-menu-member-list {
     .popover-menu-user-info {
         width: max-content;
         align-self: center;
+        overflow: hidden;
     }
 
     .popover-menu-user-full-name {
@@ -1011,6 +1012,8 @@ ul.popover-group-menu-member-list {
         /* 16px at 14px/1em */
         line-height: 1.1428em;
         color: var(--color-text-item);
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .user_circle_empty {

web/templates/popovers/user_card/user_card_popover.hbs

@@ -17,7 +17,7 @@
                 {{#if is_bot}}
                     {{#if bot_owner}}
                         <div class="bot_owner" data-tippy-content="{{ bot_owner.full_name }}">{{t "Bot owner" }}:
-                            <span class="bot-owner-name view_user_profile" data-user-id='{{ bot_owner.user_id }}'>
+                            <span class="bot-owner-name view_bot_owner_user_profile" data-user-id='{{ bot_owner.user_id }}'>
                                 {{bot_owner.full_name}}
                             </span>
                         </div>