diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.scss b/addons/mail/static/src/components/message_action_list/message_action_list.scss
index 019d8589d49..ca1301b5aab 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.scss
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.scss
@@ -1,4 +1,4 @@
-.o_MessageActionList {
+.o_MessageActionList:not(.o-isDeviceSmall) {
     font-size: 0.9rem;
 }
 
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 4379271a505..18866b07e2e 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
@@ -2,18 +2,18 @@
 <templates>
     <t t-name="mail.MessageActionList" owl="1">
         <t t-if="messageActionList">
-            <div class="o_MessageActionList d-flex border rounded-sm bg-white py-1 px-2" 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 ? 'p-2' : 'p-1' }}"  t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
+            <div class="o_MessageActionList d-flex border rounded-sm 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 ? 'pl-3 py-3 pr-2' : 'pl-2 py-2 pr-1' }}"  t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
                 <PopoverView t-if="messageActionList.reactionPopoverView" record="messageActionList.reactionPopoverView"/>
-                <span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer"  t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" t-att-class="{
+                <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,
                     }" 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 ? 'p-2' : 'p-1' }}" title="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 ? 'p-2' : 'p-1' }}" title="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 ? 'p-2' : 'p-1' }}" title="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 ? 'p-2' : 'p-1' }}" title="Delete" t-on-click="messageActionList.onClickDelete"/>
+                <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" 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" 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" 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 ? 'pl-2 py-3 pr-3' : 'pl-1 py-2 pr-2' }}" title="Delete" t-on-click="messageActionList.onClickDelete"/>
             </div>
         </t>
     </t>