diff --git a/addons/mail/static/src/components/thread_view/thread_view.scss b/addons/mail/static/src/components/thread_view/thread_view.scss
index e5f732a5252..bac6e4d204e 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.scss
+++ b/addons/mail/static/src/components/thread_view/thread_view.scss
@@ -3,9 +3,6 @@
 // ------------------------------------------------------------------
 
 .o_ThreadView {
-    display: flex;
-    position: relative;
-    flex-flow: column;
     min-height: 0;
 }
 
@@ -17,41 +14,6 @@
     width: $o-mail-chat-sidebar-width;
 }
 
-.o_ThreadView_composer {
-    flex: 0 0 auto;
-}
-
 .o_ThreadView_core {
     min-width: 0;
 }
-
-.o_ThreadView_loading {
-    display: flex;
-    align-self: center;
-    flex: 1 1 auto;
-    align-items: center;
-}
-
-.o_ThreadView_loadingFailed {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-}
-
-.o_ThreadView_messageList {
-    flex: 1 1 auto;
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_ThreadView {
-    background-color: gray('100');
-}
-
-.o_ThreadView_loadingIcon {
-    margin-right: map-get($spacers, 1);
-}
diff --git a/addons/mail/static/src/components/thread_view/thread_view.xml b/addons/mail/static/src/components/thread_view/thread_view.xml
index a74b07b90d1..7e745173932 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.xml
+++ b/addons/mail/static/src/components/thread_view/thread_view.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.ThreadView" owl="1">
         <t t-if="threadView">
-            <div class="o_ThreadView" t-att-class="threadView.extraClass" t-attf-class="{{ className }}" t-att-data-correspondent-id="threadView.thread and threadView.thread.correspondent and threadView.thread.correspondent.id" t-att-data-thread-local-id="threadView.thread and threadView.thread.localId" t-on-focusin="threadView.onFocusin" t-ref="root">
+            <div class="o_ThreadView position-relative d-flex flex-column bg-100" t-att-class="threadView.extraClass" t-attf-class="{{ className }}" t-att-data-correspondent-id="threadView.thread and threadView.thread.correspondent and threadView.thread.correspondent.id" t-att-data-thread-local-id="threadView.thread and threadView.thread.localId" t-on-focusin="threadView.onFocusin" t-ref="root">
                 <t t-if="threadView.topbar">
                     <ThreadViewTopbar className="'border-bottom'" record="threadView.topbar"/>
                 </t>
@@ -13,18 +13,18 @@
                             <RtcCallViewer record="threadView.rtcCallViewer"/>
                         </t>
                         <t t-if="threadView.isLoading and !threadView.threadCache.isLoaded" name="loadingCondition">
-                            <div class="o_ThreadView_loading">
-                                <span><i class="o_ThreadView_loadingIcon fa fa-circle-o-notch fa-spin" title="Loading..." role="img"/>Loading...</span>
+                            <div class="o_ThreadView_loading d-flex align-self-center flex-grow-1 align-items-center">
+                                <span><i class="o_ThreadView_loadingIcon fa fa-circle-o-notch fa-spin me-1" title="Loading..." role="img"/>Loading...</span>
                             </div>
                         </t>
                         <t t-elif="threadView.messageListView">
                             <MessageList
-                                className="'o_ThreadView_messageList'"
+                                className="'o_ThreadView_messageList flex-grow-1'"
                                 record="threadView.messageListView"
                             />
                         </t>
                         <t t-elif="threadView.threadCache.hasLoadingFailed">
-                            <div class="o_ThreadView_loadingFailed">
+                            <div class="o_ThreadView_loadingFailed d-flex flex-grow-1 align-items-center justify-content-center flex-column">
                                 <div class="o_ThreadView_loadingFailedText">
                                     An error occurred while fetching messages.
                                 </div>
@@ -38,7 +38,7 @@
                         </t>
                         <t t-if="threadView.composerView">
                             <Composer
-                                className="'o_ThreadView_composer'"
+                                className="'o_ThreadView_composer flex-shrink-0'"
                                 record="threadView.composerView"
                             />
                         </t>