diff --git a/addons/mail/static/src/components/chat_window/chat_window.js b/addons/mail/static/src/components/chat_window/chat_window.js
index 6fe56844c06..47a06c073b8 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.js
+++ b/addons/mail/static/src/components/chat_window/chat_window.js
@@ -52,19 +52,6 @@ export class ChatWindow extends Component {
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * Apply visual position of the chat window.
-     *
-     * @private
-     */
-    _applyVisibleOffset() {
-        const textDirection = this.messaging.locale.textDirection;
-        const offsetFrom = textDirection === 'rtl' ? 'left' : 'right';
-        const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right';
-        this.root.el.style[offsetFrom] = this.chatWindow.visibleOffset + 'px';
-        this.root.el.style[oppositeFrom] = 'auto';
-    }
-
     /**
      * Save the scroll positions of the chat window in the store.
      * This is useful in order to remount chat windows and keep previous
@@ -113,7 +100,6 @@ export class ChatWindow extends Component {
                 this._inputRef.el.focus();
             }
         }
-        this._applyVisibleOffset();
     }
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
index 5870ff77532..918ac114657 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.xml
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -9,7 +9,7 @@
                 'o-fullscreen': props.isFullscreen,
                 'o-mobile': messaging and messaging.device.isMobile,
                 'o-new-message': chatWindow and !chatWindow.thread,
-            }" t-on-keydown="_onKeydown" t-on-focusout="_onFocusout" t-att-data-chat-window-local-id="chatWindow ? chatWindow.localId : undefined" t-att-data-thread-local-id="chatWindow ? (chatWindow.thread ? chatWindow.thread.localId : '') : undefined" t-ref="root"
+            }" t-att-style="chatWindow ? chatWindow.componentStyle : undefined" t-on-keydown="_onKeydown" t-on-focusout="_onFocusout" t-att-data-chat-window-local-id="chatWindow ? chatWindow.localId : undefined" t-att-data-thread-local-id="chatWindow ? (chatWindow.thread ? chatWindow.thread.localId : '') : undefined" t-ref="root"
         >
             <t t-if="chatWindow">
                 <ChatWindowHeader
diff --git a/addons/mail/static/src/models/chat_window/chat_window.js b/addons/mail/static/src/models/chat_window/chat_window.js
index dd32e7fe5b7..259449dbeff 100644
--- a/addons/mail/static/src/models/chat_window/chat_window.js
+++ b/addons/mail/static/src/models/chat_window/chat_window.js
@@ -185,6 +185,16 @@ registerModel({
                 this.thread.notifyFoldStateToServer('open');
             }
         },
+        /**
+          * @private
+          * @returns {string}
+          */
+        _computeComponentStyle() {
+            const textDirection = this.messaging.locale.textDirection;
+            const offsetFrom = textDirection === 'rtl' ? 'left' : 'right';
+            const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right';
+            return `${offsetFrom}: ${this.visibleOffset}px; ${oppositeFrom}: auto`;
+        },
         /**
          * @private
          * @returns {boolean}
@@ -369,6 +379,9 @@ registerModel({
             inverse: 'chatWindow',
             isCausal: true,
         }),
+        componentStyle: attr({
+            compute: '_computeComponentStyle',
+        }),
         /**
          * Determines whether the buttons to start a RTC call should be displayed.
          */