diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index 4fe782d047bc5f001945e240c48241f5c7ce0a6e..b23d7d373aa24aabf7ed2efea2e975c961d879a4 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -1,27 +1,26 @@
 // ------------------------------------------------------------------
 // Layout
 // ------------------------------------------------------------------
+@mail-chat-sidebar-width: 250px;
 .o_mail_chat {
     .o-position-absolute(0, 0, 0, 0);
     height: 100%;
 
     @media (max-width: @screen-xs-max) {
         height: auto;
-        flex-direction: column;
-
     }
 
-    .o-flex-display();
-    .o-flex-flow(row, nowrap);
-
     .o_mail_chat_sidebar {
-        .o-flex(0, 0, 250px);
+        width: @mail-chat-sidebar-width;
+        height: 100%;
+        float: left;
         overflow: auto;
         padding: 8px 0;
         font-weight: 300;
 
         @media (max-width: @screen-xs-max) {
-            flex: none;
+            width: 100%;
+            float: none;
             display: none;
         }
 
@@ -70,12 +69,16 @@
     }
 
     .o_mail_chat_content {
-        .o-flex(1, 1, 100%);
         .o-flex-display();
         .o-flex-flow(column, nowrap);
         height: 100%;
+        margin-left: @mail-chat-sidebar-width;
         position: relative;
 
+        @media (max-width: @screen-xs-max) {
+            margin-left: 0;
+        }
+
         .o_mail_thread {
             .o-flex(1, 0, 0);
             overflow: auto;