[FIX] mail: make chatter flex in Documents app

The chatter in documents was not flex, which made it take a lot
of space without any wrapping. As a result, usually chatter took
all the screen and content was massively overflowing, resulting
in poor UX.

This was caused by a specific stylerule in documents with chatter
that made sense in a earlier version of chatter CSS, but this
is no longer needed.

Also we actually want to reuse most style of chatter in form view.
This commit adds `o-mail-ChatterContainer` classname on same
HTML node as `o-mail-Form-Chatter` and adapts style, so that
Document can set this classname to reuse style.

opw-3681435

closes odoo/odoo#161940

Related: odoo/enterprise#60772
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/views/web/form/form_compiler.js

@@ -52,7 +52,7 @@ function compileChatter(node, params) {
         saveRecord: "() => __comp__.save and __comp__.save()",
     });
     const chatterContainerHookXml = createElement("div");
-    chatterContainerHookXml.classList.add("o-mail-Form-chatter");
+    chatterContainerHookXml.classList.add("o-mail-ChatterContainer", "o-mail-Form-chatter");
     append(chatterContainerHookXml, chatterContainerXml);
     return chatterContainerHookXml;
 }

addons/mail/static/src/views/web/form/form_renderer.scss

@@ -2,24 +2,21 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o-mail-Form-chatter {
+.o-mail-ChatterContainer, .o-mail-Form-chatter {
     --ChatterTopbar-padding-v: #{map-get($spacers, 2)};
     --ChatterTopbar-padding-left: #{$o-horizontal-padding};
     --ChatterTopbar-padding-right: #{$o-horizontal-padding};
+    --Chatter-asideExtraWidth: 0px; // to take into account more items, e.g. "close" chatter feature
 
     &.o-aside {
         flex-shrink: 0;
         flex-grow: 1;
         padding: map-get($spacers, 0);
-        width: $o-mail-Chatter-minWidth;
+        width: calc(#{$o-mail-Chatter-minWidth} + var(--Chatter-asideExtraWidth));
 
         .o-mail-Message.o-not-discussion {
             border-width: $border-width 0;
         }
-
-        .o_ChatterContainer {
-            width: auto;
-        }
     }
 
     &.o-isInFormSheetBg {
@@ -37,7 +34,7 @@
 // Style
 // ------------------------------------------------------------------
 
-.o-mail-Form-chatter {
+.o-mail-ChatterContainer, .o-mail-Form-chatter {
     display: flex;
     margin: 0 auto;
     padding-bottom: map-get($spacers, 5);

addons/project/static/src/project_sharing/views/form/project_sharing_form_compiler.js

@@ -24,7 +24,7 @@ function compileChatter(node, params) {
         projectSharingId: params.projectSharingId,
     });
     const chatterContainerHookXml = createElement('div');
-    chatterContainerHookXml.classList.add('o-mail-Form-chatter');
+    chatterContainerHookXml.classList.add("o-mail-ChatterContainer", 'o-mail-Form-chatter');
     append(chatterContainerHookXml, chatterContainerXml);
     return chatterContainerHookXml;
 }