user_card_popover: Display bot owner user card popover as an overlay.

This commit displays the bot owner card as an overlay in the middle of
the screen, like we do for mobile screen sizes where the reference
elements are hidden.

This also hides the bot user card when it's bot owner card is opened.

web/src/emoji_picker.ts

@@ -726,6 +726,7 @@ export function toggle_emoji_popover(
         },
         {
             show_as_overlay_on_mobile: true,
+            show_as_overlay_always: false,
         },
     );
 }

web/src/giphy.js

@@ -209,6 +209,7 @@ function toggle_giphy_popover(target) {
         },
         {
             show_as_overlay_on_mobile: true,
+            show_as_overlay_always: false,
         },
     );
 }

web/src/popover_menus.ts

@@ -379,7 +379,7 @@ function get_props_for_popover_centering(
 export function toggle_popover_menu(
     target: tippy.ReferenceElement,
     popover_props: Partial<tippy.Props>,
-    options?: {show_as_overlay_on_mobile: boolean},
+    options?: {show_as_overlay_on_mobile: boolean; show_as_overlay_always: boolean},
 ): tippy.Instance {
     const instance = target._tippy;
     if (instance) {
@@ -391,7 +391,11 @@ export function toggle_popover_menu(
 
     // If the window is mobile-sized, we will render the
     // popover centered on the screen as an overlay.
-    if (options?.show_as_overlay_on_mobile && window.innerWidth <= media_breakpoints_num.md) {
+    if (
+        (options?.show_as_overlay_on_mobile === true &&
+            window.innerWidth <= media_breakpoints_num.md) ||
+        options?.show_as_overlay_always === true
+    ) {
         mobile_popover_props = {
             ...get_props_for_popover_centering(popover_props),
         };

web/src/user_card_popover.js

@@ -190,6 +190,19 @@ export function toggle_user_card_popover(element, user) {
     );
 }
 
+function toggle_user_card_popover_for_bot_owner(element, user) {
+    show_user_card_popover(
+        user,
+        $(element),
+        false,
+        false,
+        "compose_private_message",
+        "user_card",
+        "right",
+        true,
+    );
+}
+
 function get_user_card_popover_data(
     user,
     has_message_context,
@@ -292,6 +305,7 @@ function show_user_card_popover(
     private_msg_class,
     template_class,
     popover_placement,
+    show_as_overlay,
     on_mount,
 ) {
     let popover_html;
@@ -350,6 +364,7 @@ function show_user_card_popover(
         },
         {
             show_as_overlay_on_mobile: true,
+            show_as_overlay_always: show_as_overlay,
         },
     );
 }
@@ -433,6 +448,7 @@ function toggle_user_card_popover_for_message(
         "respond_personal_button",
         "message_user_card",
         "right",
+        false,
         on_mount,
     );
 }
@@ -530,6 +546,7 @@ function toggle_sidebar_user_card_popover($target) {
         "compose_private_message",
         "user_sidebar",
         "left",
+        false,
         (instance) => {
             /* See comment in get_props_for_popover_centering for explanation of this. */
             $(instance.popper).find(".tippy-box").addClass("show-when-reference-hidden");
@@ -711,7 +728,12 @@ function register_click_handlers() {
     $("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);
-        toggle_user_card_popover(e.currentTarget, user);
+        if ($(e.target).closest(".user-card-popover-bot-owner-field").length > 0) {
+            hide_all_user_card_popovers();
+            toggle_user_card_popover_for_bot_owner(e.target, user);
+        } else {
+            toggle_user_card_popover(e.target, user);
+        }
         e.stopPropagation();
         e.preventDefault();
     });

web/src/user_group_popover.ts

@@ -110,6 +110,7 @@ export function toggle_user_group_info_popover(
         },
         {
             show_as_overlay_on_mobile: true,
+            show_as_overlay_always: false,
         },
     );
 }