diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.js b/addons/mail/static/src/components/chatter_container/chatter_container.js
index 0c45751d44f..54a932bb4c3 100644
--- a/addons/mail/static/src/components/chatter_container/chatter_container.js
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.js
@@ -133,6 +133,10 @@ Object.assign(ChatterContainer, {
             type: Boolean,
             optional: true,
         },
+        isInFormSheetBg: {
+            type: Boolean,
+            optional: true,
+        },
         threadId: {
             type: Number,
             optional: true,
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.scss b/addons/mail/static/src/components/chatter_container/chatter_container.scss
new file mode 100644
index 00000000000..8ab3fd3e09b
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.scss
@@ -0,0 +1,3 @@
+.o_ChatterContainer.o-isInFormSheetBg {
+    max-width: $o-form-view-sheet-max-width;
+}
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.xml b/addons/mail/static/src/components/chatter_container/chatter_container.xml
index dd88f688a64..f0dc3603991 100644
--- a/addons/mail/static/src/components/chatter_container/chatter_container.xml
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatterContainer" owl="1">
-        <div class="o_ChatterContainer flex-grow-1 d-flex w-100" t-attf-class="{{ className }}" data-command-category="mail" t-ref="root">
+        <div class="o_ChatterContainer flex-grow-1 d-flex w-100" t-att-class="{ 'o-isInFormSheetBg mx-auto': props.isInFormSheetBg }" t-attf-class="{{ className }}" data-command-category="mail" t-ref="root">
             <t t-if="chatter">
                 <Chatter record="chatter"/>
             </t>
diff --git a/addons/mail/static/src/models/chatter.js b/addons/mail/static/src/models/chatter.js
index cf6a33b4970..d110f5a87ed 100644
--- a/addons/mail/static/src/models/chatter.js
+++ b/addons/mail/static/src/models/chatter.js
@@ -439,6 +439,9 @@ registerModel({
             compute: '_computeIsDisabled',
             default: false,
         }),
+        isInFormSheetBg: attr({
+            default: false,
+        }),
         isPreparingAttachmentsLoading: attr({
             compute: '_computeIsPreparingAttachmentsLoading',
             default: false,
diff --git a/addons/mail/static/src/scss/variables/derived_variables.scss b/addons/mail/static/src/scss/variables/derived_variables.scss
index c554c2d7cf5..c47ee0aaf7c 100644
--- a/addons/mail/static/src/scss/variables/derived_variables.scss
+++ b/addons/mail/static/src/scss/variables/derived_variables.scss
@@ -1,2 +1,4 @@
 // Variable definitions that depend on bootstrap variables
 $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
+// Side chatter
+$o-chatter-min-width: 530px !default;
diff --git a/addons/mail/static/src/widgets/form_renderer/form_renderer.js b/addons/mail/static/src/widgets/form_renderer/form_renderer.js
index 7b879e81fbc..368da79228e 100644
--- a/addons/mail/static/src/widgets/form_renderer/form_renderer.js
+++ b/addons/mail/static/src/widgets/form_renderer/form_renderer.js
@@ -110,6 +110,12 @@ FormRenderer.include({
     // Mail Methods
     //--------------------------------------------------------------------------
 
+    /**
+     * @returns {boolean}
+     */
+    hasAttachmentViewer() {
+        return false;
+    },
     /**
      * @private
      * @returns {boolean}
@@ -133,6 +139,7 @@ FormRenderer.include({
             hasParentReloadOnFollowersUpdate: this.chatterFields.hasRecordReloadOnFollowersUpdate,
             hasParentReloadOnMessagePosted: this.chatterFields.hasRecordReloadOnMessagePosted,
             isAttachmentBoxVisibleInitially: this.chatterFields.isAttachmentBoxVisibleInitially,
+            isInFormSheetBg: this.hasAttachmentViewer(),
             threadId: this.state.res_id,
             threadModel: this.state.model,
         };
@@ -162,6 +169,11 @@ FormRenderer.include({
         } else {
             $(this._chatterContainerTarget).removeClass('o-aside');
         }
+        if (this.hasAttachmentViewer()) {
+            this._chatterContainerTarget.classList.add('o-isInFormSheetBg');
+        } else {
+            this._chatterContainerTarget.classList.remove('o-isInFormSheetBg');
+        }
     },
     /**
      * @abstract
diff --git a/addons/mail/static/src/widgets/form_renderer/form_renderer.scss b/addons/mail/static/src/widgets/form_renderer/form_renderer.scss
index 3092055b645..d98cd07bb18 100644
--- a/addons/mail/static/src/widgets/form_renderer/form_renderer.scss
+++ b/addons/mail/static/src/widgets/form_renderer/form_renderer.scss
@@ -2,6 +2,39 @@
 // Layout
 // ------------------------------------------------------------------
 
+.o_FormRenderer_chatterContainer {
+
+    &.o-aside {
+        border-left: $border-width solid;
+        padding: map-get($spacers, 0);
+        width: $o-chatter-min-width;
+
+        .o_Message.o-not-discussion {
+            border-width: $border-width 0;
+        }
+    }
+
+    &.o-isInFormSheetBg:not(.o-aside) {
+        max-width: none;
+        background-color: $white;
+        @include o-form-sheet-negative-margin;
+
+        &:not(.o-aside) {
+            width: auto;
+            border-top: 1px solid $border-color;
+        }
+    }
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_FormRenderer_chatterContainer.o-aside {
+    border-left-color: $border-color;
+}
+
+
 .o_FormRenderer_chatterContainer {
     display: flex;
     flex: 1 1 auto;