FIX: various mobile chat improvements (#22132)

- FIX: improves reactions and thread indicator touch event on mobile
These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent.
- DEV: moves state on top level message node
- FIX: ensures popover arrow has the correct border
- FIX: makes a message expanded by default
- FIX applies the same ios scroll fix on thread and channel
- UI: better active/hover state for thread indicator
- UI: attempts to follow more closely our BEM naming scheme
- FIX: reduces bottom padding on message with thread indicator and user info hidden
- UI: add padding for first message in thread
- FIX: prevents actions backdrop to open thread
- UI: makes thread indicator resizable

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

@@ -68,7 +68,7 @@ module PageObjects
       end
 
       def click_message_action_mobile(message, message_action)
-        expand_message_actions_mobile(message, delay: 0.6)
+        expand_message_actions_mobile(message, delay: 0.4)
         find(".chat-message-actions [data-id=\"#{message_action}\"]").click
       end
 
@@ -143,7 +143,7 @@ module PageObjects
       end
 
       def has_bookmarked_message?(message)
-        within(message_by_id(message.id)) { find(".chat-message-bookmarked") }
+        find(message_by_id_selector(message.id) + ".-bookmarked")
       end
 
       def find_reaction(message, emoji)

plugins/chat/spec/system/page_objects/chat/components/message.rb

@@ -22,7 +22,7 @@ module PageObjects
         end
 
         def select(shift: false)
-          if component[:class].include?("selecting-message")
+          if component[:class].include?("-selectable")
             message_selector = component.find(".chat-message-selector")
             if shift
               message_selector.click(:shift)
@@ -85,10 +85,10 @@ module PageObjects
         def build_selector(**args)
           selector = SELECTOR
           selector += "[data-id=\"#{args[:id]}\"]" if args[:id]
-          selector += "[data-selected]" if args[:selected]
-          selector += ".is-persisted" if args[:persisted]
-          selector += ".is-staged" if args[:staged]
-          selector += ".is-deleted" if args[:deleted]
+          selector += ".-selected" if args[:selected]
+          selector += ".-persisted" if args[:persisted]
+          selector += ".-staged" if args[:staged]
+          selector += ".-deleted" if args[:deleted]
           selector
         end
       end