From 6944eb3118b957618f493eb85339ef811ef59025 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Mon, 15 Apr 2024 17:31:25 +0200
Subject: [PATCH] [FIX] mail: make chatter flex in Documents app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../mail/static/src/views/web/form/form_compiler.js   |  2 +-
 .../mail/static/src/views/web/form/form_renderer.scss | 11 ++++-------
 .../views/form/project_sharing_form_compiler.js       |  2 +-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/addons/mail/static/src/views/web/form/form_compiler.js b/addons/mail/static/src/views/web/form/form_compiler.js
index 208a3611e53..33c8012094d 100644
--- a/addons/mail/static/src/views/web/form/form_compiler.js
+++ b/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;
 }
diff --git a/addons/mail/static/src/views/web/form/form_renderer.scss b/addons/mail/static/src/views/web/form/form_renderer.scss
index c2892b37263..d7493772827 100644
--- a/addons/mail/static/src/views/web/form/form_renderer.scss
+++ b/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);
diff --git a/addons/project/static/src/project_sharing/views/form/project_sharing_form_compiler.js b/addons/project/static/src/project_sharing/views/form/project_sharing_form_compiler.js
index 85cde2b409f..081d69ae649 100644
--- a/addons/project/static/src/project_sharing/views/form/project_sharing_form_compiler.js
+++ b/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;
 }