DEV: prevents message actions to hide drawer's header (#22448)

In specific conditions (generally a small drawer, with a long message) it is possible to have the message’s actions menu to be displayed hover the drawer's header.

This is particularly hard to fix correctly using popper due to our positioning which is slightly at the limit of the container.

The proposed fix targets mostly the specs by ensuring the messages actions will be hidden before attempting to click any header's button.

plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss

@@ -1,5 +1,5 @@
-.chat-message-actions[data-popper-reference-hidden],
-.chat-message-actions[data-popper-escaped] {
+.chat-message-actions-container[data-popper-reference-hidden],
+.chat-message-actions-container[data-popper-escaped] {
   visibility: hidden;
   pointer-events: none;
 }

plugins/chat/spec/system/drawer_spec.rb

@@ -80,7 +80,7 @@ RSpec.describe "Drawer", type: :system do
       drawer.open_channel(channel_1)
       channel_page.hover_message(message_1)
 
-      expect(page).to have_css(".chat-message-actions-container")
+      expect(page).to have_css(".chat-message-actions-container", visible: :all)
 
       drawer.close
 

plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb

@@ -5,14 +5,17 @@ module PageObjects
     class ChatDrawer < PageObjects::Pages::Base
       VISIBLE_DRAWER = ".chat-drawer.is-expanded"
       def open_browse
+        mouseout
         find("#{VISIBLE_DRAWER} .open-browse-page-btn").click
       end
 
       def close
+        mouseout
         find("#{VISIBLE_DRAWER} .chat-drawer-header__close-btn").click
       end
 
       def back
+        mouseout
         find("#{VISIBLE_DRAWER} .chat-drawer-header__back-btn").click
       end
 
@@ -24,6 +27,7 @@ module PageObjects
       end
 
       def maximize
+        mouseout
         find("#{VISIBLE_DRAWER} .chat-drawer-header__full-screen-btn").click
       end
 
@@ -62,6 +66,16 @@ module PageObjects
       def has_no_unread_thread_indicator?
         has_no_css?("#{thread_list_button_selector}.has-unreads")
       end
+
+      private
+
+      def mouseout
+        # Ensure that the mouse is not hovering over the drawer
+        # and that the message actions menu is closed.
+        # This check is essential because the message actions menu might partially
+        # overlap with the header, making certain buttons inaccessible.
+        find("#site-logo").hover
+      end
     end
   end
 end