diff --git a/addons/mail/static/src/components/chatter/chatter.scss b/addons/mail/static/src/components/chatter/chatter.scss
deleted file mode 100644
index d9ae7a86c92..00000000000
--- a/addons/mail/static/src/components/chatter/chatter.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_Chatter {
-    position: relative;
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    width: map-get($sizes, 100);
-}
-
-.o_Chatter_composer {
-    border-bottom: $border-width solid;
-
-    &.o-bordered {
-        border-left: $border-width solid;
-        border-right: $border-width solid;
-    }
-}
-
-.o_Chatter_scrollPanel {
-    overflow-y: auto;
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_Chatter {
-    background-color: $white;
-    border-color: $border-color;
-}
-
-.o_Chatter_composer {
-    border-bottom-color: $border-color;
-
-    &.o-bordered {
-        border-left-color: $border-color;
-        border-right-color: $border-color;
-    }
-}
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index 0a88f510846..ff4225b4d00 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.Chatter" owl="1">
-        <div class="o_Chatter" t-attf-class="{{ className }}" t-ref="root">
+        <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-white" t-attf-class="{{ className }}" t-ref="root">
             <t t-if="chatter">
                 <div class="o_Chatter_fixedPanel">
                     <ChatterTopbar
@@ -11,15 +11,15 @@
                     />
                     <t t-if="chatter.composerView">
                         <Composer
-                            className="'o_Chatter_composer'"
-                            classNameObj="{ 'o-bordered': chatter.hasExternalBorder }"
+                            className="'o_Chatter_composer border-bottom'"
+                            classNameObj="{ 'o-bordered border-left border-right': chatter.hasExternalBorder }"
                             localId="chatter.composerView.localId"
                             hasMentionSuggestionsBelowPosition="true"
                             isExpandable="true"
                         />
                     </t>
                 </div>
-                <div class="o_Chatter_scrollPanel" t-on-scroll="chatter.onScrollScrollPanel" t-ref="scrollPanel">
+                <div class="o_Chatter_scrollPanel overflow-auto" t-on-scroll="chatter.onScrollScrollPanel" t-ref="scrollPanel">
                     <t t-if="chatter.attachmentBoxView">
                         <AttachmentBox
                             className="'o_Chatter_attachmentBox'"