diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.xml b/addons/mail/static/src/components/message_action_list/message_action_list.xml
index 158d0ab2cc5..b3612fb4751 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.xml
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.xml
@@ -4,15 +4,24 @@
         <t t-if="messageActionList">
             <div class="o_MessageActionList d-flex border rounded-1 bg-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="messageActionList.onClick" t-ref="root">
                 <i t-if="messageActionList.message.hasReactionIcon" class="o_MessageActionList_action o_MessageActionList_actionReaction fa fa-lg fa-smile-o o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-3 py-3 pe-2' : 'ps-2 py-2 pe-1' }}"  t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
-                <span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer"  t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" t-att-class="{
-                        'o_MessageActionList_actionStar_active': messageActionList.message.isStarred,
-                        'fa fa-lg fa-star': messageActionList.message.isStarred,
-                        'fa fa-lg fa-star-o': !messageActionList.message.isStarred,
-                    }" role="button" tabindex="0" aria-label="Mark as Todo" t-att-aria-pressed="messageActionList.message.isStarred ? 'true' : 'false'" title="Mark as Todo" t-on-click="messageActionList.onClickToggleStar"/>
-                <span t-if="messageActionList.hasReplyIcon" class="o_MessageActionList_action o_MessageActionList_actionReply fa fa-lg fa-reply o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Reply" role="button" tabindex="0" aria-label="Reply" t-on-click="messageActionList.onClickReplyTo"/>
-                <span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Mark as Read" role="button" tabindex="0" aria-label="Mark as Read" t-on-click="messageActionList.onClickMarkAsRead"/>
-                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionEdit fa fa-lg fa-pencil o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Edit" role="button" tabindex="0" aria-label="Edit" t-on-click="messageActionList.onClickEdit"/>
-                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-2 py-3 pe-3' : 'ps-1 py-2 pe-2' }}" title="Delete" role="button" tabindex="0" aria-label="Delete" t-on-click="messageActionList.onClickDelete"/>
+                <t t-if="!messageActionList.isCompact || !messageActionList.hasCompactIcon">
+                    <span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer"  t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" t-att-class="{
+                            'o_MessageActionList_actionStar_active': messageActionList.message.isStarred,
+                            'fa fa-lg fa-star': messageActionList.message.isStarred,
+                            'fa fa-lg fa-star-o': !messageActionList.message.isStarred,
+                        }" role="button" tabindex="0" aria-label="Mark as Todo" t-att-aria-pressed="messageActionList.message.isStarred ? 'true' : 'false'" title="Mark as Todo" t-on-click="messageActionList.onClickToggleStar"/>
+                    <span t-if="messageActionList.hasReplyIcon" class="o_MessageActionList_action o_MessageActionList_actionReply fa fa-lg fa-reply o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Reply" role="button" tabindex="0" aria-label="Reply" t-on-click="messageActionList.onClickReplyTo"/>
+                    <span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Mark as Read" role="button" tabindex="0" aria-label="Mark as Read" t-on-click="messageActionList.onClickMarkAsRead"/>
+                    <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionEdit fa fa-lg fa-pencil o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Edit" role="button" tabindex="0" aria-label="Edit" t-on-click="messageActionList.onClickEdit"/>
+                    <!-- If there is no compact icon, delete will be the last button of the action list, a different styling will be applied. -->
+                    <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-att-class="{
+                            'px-2 py-3': messageActionList.hasCompactIcon and messaging.device.isSmall,
+                            'px-1 py-2': messageActionList.hasCompactIcon and !messaging.device.isSmall,
+                            'ps-2 py-3 pe-3': !messageActionList.hasCompactIcon and messaging.device.isSmall,
+                            'ps-1 py-2 pe-2': !messageActionList.hasCompactIcon and !messaging.device.isSmall,
+                        }" title="Delete" role="button" tabindex="0" aria-label="Delete" t-on-click="messageActionList.onClickDelete"/>
+                </t>
+                <span t-if="messageActionList.hasCompactIcon" class="o_MessageActionList_action o_MessageActionList_actionToggleCompact fa fa-lg fa-ellipsis-h o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-2 py-3 pe-3' : 'ps-1 py-2 pe-2' }}" t-att-title="messageActionList.isCompact ? 'Expend' : 'Compact'" role="button" tabindex="0" t-att-aria-label="messageActionList.isCompact ? 'Expend' : 'Compact'" t-on-click="messageActionList.onClickToggleCompact"/>
             </div>
         </t>
     </t>
diff --git a/addons/mail/static/src/models/message_action_list.js b/addons/mail/static/src/models/message_action_list.js
index 315184af9fa..12eff4fcc4e 100644
--- a/addons/mail/static/src/models/message_action_list.js
+++ b/addons/mail/static/src/models/message_action_list.js
@@ -65,6 +65,13 @@ registerModel({
             markEventHandled(ev, 'MessageActionList.replyTo');
             this.messageView.replyTo();
         },
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        onClickToggleCompact(ev) {
+            this.update({ isCompact: !this.isCompact });
+        },
         /**
          * @private
          * @param {MouseEvent} ev
@@ -72,6 +79,24 @@ registerModel({
         onClickToggleStar(ev) {
             this.message.toggleStar();
         },
+        /**
+         * @private
+         * @returns {integer|FieldCommand}
+         */
+        _computeActionsCount() {
+            if (this.message){
+                const actions = [
+                    this.hasMarkAsReadIcon,
+                    this.hasReplyIcon,
+                    this.message.canBeDeleted,
+                    this.message.canBeDeleted,
+                    this.message.canStarBeToggled,
+                    this.message.hasReactionIcon,
+                ]
+                return actions.filter(Boolean).length;
+            }
+            return clear();
+        },
         /**
          * @private
          * @returns {string}
@@ -79,6 +104,17 @@ registerModel({
         _computeAddReactionText() {
             return this.env._t("Add a Reaction");
         },
+        /**
+         * @private
+         * @returns {boolean}
+         */
+        _computeHasCompactIcon() {
+            const COMPACT_THRESHOLD = 2;
+            const viewer = this.messageView && this.messageView.messageListViewMessageViewItemOwner && this.messageView.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.threadViewer;
+            if (viewer && viewer.chatWindow) {
+                return this.actionsCount > COMPACT_THRESHOLD;
+            }
+        },
         /**
          * @private
          * @returns {boolean}
@@ -110,6 +146,10 @@ registerModel({
          * States the reference to the reaction action in the component.
          */
         actionReactionRef: attr(),
+        actionsCount: attr({
+            compute: '_computeActionsCount',
+            readonly: true,
+        }),
         addReactionText: attr({
             compute: '_computeAddReactionText',
         }),
@@ -117,6 +157,10 @@ registerModel({
             inverse: 'messageActionListOwnerAsDeleteConfirm',
             isCausal: true,
         }),
+        hasCompactIcon: attr({
+            compute: '_computeHasCompactIcon',
+            readonly: true,
+        }),
         /**
          * Determines whether this message action list has mark as read icon.
          */
@@ -129,6 +173,9 @@ registerModel({
         hasReplyIcon: attr({
             compute: '_computeHasReplyIcon',
         }),
+        isCompact: attr({
+            default: true,
+        }),
         /**
          * States the message on which this action message list operates.
          */