[FIX] mail: make message actions float in mailboxes on mobile

Before this commit, message actions were floating on top-right
corner only in chat windows. In mobile, most threads are shown
in a (fullscreen) chat windows. Some exceptions are mailboxes
and chatters in an Odoo view.

As a result, lots of horizontal space is wasted for this action,
so that messages take only half of the screen width.

This commit fixes the issue by using floating visual of message
action list when in chat window or in mobile. That way, when the
width of thread is small, then messages take most of the container
width thanks to actions being in floated layout.

Task-3411797

closes odoo/odoo#127569

X-original-commit: fb100f848388d6e50029a81080e051c77cc057c2
Signed-off-by: Didier Debondt (did) <did@odoo.com>

addons/mail/static/src/core/common/message.js

@@ -103,6 +103,7 @@ export class Message extends Component {
         this.attachmentService = useService("mail.attachment");
         this.user = useService("user");
         this.dialog = useService("dialog");
+        this.ui = useState(useService("ui"));
         this.openReactionMenu = this.openReactionMenu.bind(this);
         useChildSubEnv({
             alignedRight: this.isAlignedRight,

addons/mail/static/src/core/common/message.xml

@@ -105,9 +105,9 @@
                             <div t-if="props.hasActions and message.hasActions" class="o-mail-Message-actions"
                                 t-att-class="{
                                     'start-0 ms-3': isAlignedRight,
-                                    'end-0 me-3': env.inChatWindow and !isAlignedRight,
-                                    'position-absolute top-0 mt-n3': env.inChatWindow,
-                                    'ms-2': !env.inChatWindow,
+                                    'end-0 me-3': (env.inChatWindow or ui.isSmall) and !isAlignedRight,
+                                    'position-absolute top-0 mt-n3': env.inChatWindow or ui.isSmall,
+                                    'ms-2': !env.inChatWindow and !ui.isSmall,
                                     'invisible': !isActive,
                                     'o-expanded': state.expandOptions
                                 }"