Don't let message actions drop upwards if...

it's the first (or second) message in the history, otherwise it might
appear behind the chat header.

src/shared/chat/message-actions.js

@@ -15,7 +15,6 @@ class MessageActions extends CustomElement {
             correcting: { type: Boolean },
             editable: { type: Boolean },
             hide_url_previews: { type: Boolean },
-            is_newest_message: { type: Boolean },
             is_retracted: { type: Boolean },
             message_type: { type: String },
             model: { type: Object },
@@ -28,11 +27,17 @@ class MessageActions extends CustomElement {
     }
 
     async renderActions () {
+        // We want to let the message actions menu drop upwards if we're at the
+        // bottom of the message history, and down otherwise. This is to avoid
+        // the menu disappearing behind the bottom panel (toolbar, textarea etc).
+        // That's difficult to know from state, so we're making an approximation here.
+        const should_drop_up = this.model.collection.length > 2 && this.model === this.model.collection.last();
+
         const buttons = await this.getActionButtons();
         const items = buttons.map(b => MessageActions.getActionsDropdownItem(b));
         if (items.length) {
             return html`<converse-dropdown
-                class="chat-msg__actions ${this.is_newest_message ? 'dropup dropup--left' : 'dropleft'}"
+                class="chat-msg__actions ${should_drop_up ? 'dropup dropup--left' : 'dropleft'}"
                 .items=${ items }></converse-dropdown>`;
         } else {
             return '';

src/shared/chat/message.js

@@ -200,7 +200,6 @@ export default class Message extends CustomElement {
     getDerivedMessageProps () {
         const format = api.settings.get('time_format');
         return {
-            'is_newest_message': this.model === this.model.collection.last(),
             'pretty_time': dayjs(this.model.get('edited') || this.model.get('time')).format(format),
             'has_mentions': this.hasMentions(),
             'hats': getHats(this.model),

src/shared/chat/templates/message.js

@@ -39,7 +39,6 @@ export default (el, o) => {
                         ?correcting=${o.correcting}
                         ?editable=${o.editable}
                         ?hide_url_previews=${el.model.get('hide_url_previews')}
-                        ?is_newest_message=${o.is_newest_message}
                         ?is_retracted=${o.is_retracted}
                         unfurls="${el.model.get('ogp_metadata')?.length}"
                         message_type="${o.message_type}"></converse-message-actions>