[FIX] mail: o-mail-Message and ChatWindow, adjust overall spacing

task-3338419

closes odoo/odoo#123356

Part-of: task-3326263
X-original-commit: b5c035a454780a1e5e997c683cec536efa780ec6
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core_ui/message.js

@@ -153,8 +153,9 @@ export class Message extends Component {
                 this.props.thread,
                 this.props.message
             ),
-            "o-squashed pt-1": this.props.squashed,
-            "mt-1": !this.props.squashed && this.props.thread,
+            "o-squashed pb-1": this.props.squashed,
+            "py-1": !this.props.squashed,
+            "mt-2": !this.props.squashed && this.props.thread,
             "px-3": !this.props.isInChatWindow,
             "px-1": this.props.isInChatWindow,
             "opacity-50": this.props.messageToReplyTo?.isNotSelected(

addons/mail/static/src/core_ui/message.xml

@@ -3,7 +3,7 @@
 
     <t t-name="mail.Message" owl="1">
         <ActionSwiper onRightSwipe="hasTouch() and isInInbox ? { action: () => this.messageService.setDone(this.message), bgColor: 'bg-success', icon: 'fa-check-circle' } : undefined">
-            <div class="o-mail-Message position-relative py-1"
+            <div class="o-mail-Message position-relative"
                 t-att-class="attClass"
                 role="group"
                 t-att-aria-label="messageTypeText"
@@ -34,7 +34,7 @@
                         </t>
                     </div>
                     <div class="w-100 overflow-auto" t-att-class="{ 'flex-grow-1': message.composer }">
-                        <div t-if="!props.squashed" class="o-mail-Message-header d-flex flex-wrap align-items-baseline">
+                        <div t-if="!props.squashed" class="o-mail-Message-header d-flex flex-wrap align-items-baseline mb-1 lh-1">
                             <span t-if="(message.author or message.email_from) and shouldDisplayAuthorName" class="o-mail-Message-author" t-att-class="{ 'cursor-pointer o_redirect': hasAuthorClickable }" t-att-title="authorText" t-on-click="ev => this.onClickAuthor(ev)">
                                 <strong class="me-1 text-truncate"><t t-if="message.author" t-esc="message.author.name"/><t t-else="" t-esc="message.email_from"/></strong>
                             </span>
@@ -89,7 +89,7 @@
                                                 }" t-attf-class="{{ isAlignedRight ? 'rounded-start-3' : 'rounded-end-3' }}"/>
                                             <div class="position-relative" t-att-class="{
                                                         'p-1': message.isNote,
-                                                        'o-mail-Message-body mb-0 p-3': !message.isNote,
+                                                        'o-mail-Message-body mb-0 py-2 px-3': !message.isNote,
                                                         'align-self-start text-break rounded-end-3 rounded-bottom-3': !state.isEditing and !message.isNote,
                                                         'o-mail-Message-editable flex-grow-1': state.isEditing,
                                                         }" t-ref="body">

addons/mail/static/src/core_ui/primary_variables.scss

@@ -1,6 +1,6 @@
 $o-mail-Avatar-size: 36px !default;
 $o-mail-Avatar-sizeSmall: 24px !default;
-$o-mail-ChatWindow-width: 340px !default;
+$o-mail-ChatWindow-width: 360px !default; // same value as CHAT_WINDOW_WIDTH
 // Needed because $border-radius variations are all set to 0 in enterprise.
 $o-RoundedRectangle-small: .2rem !default;
 $o-RoundedRectangle-large: 3 * $o-RoundedRectangle-small !default;

addons/mail/static/src/scss/variables/primary_variables.scss

@@ -1,5 +1,5 @@
 $o-mail-Avatar-size: 42px !default;
-$o-mail-ChatWindow-width: 340px !default;
+$o-mail-ChatWindow-width: 360px !default; // same value as CHAT_WINDOW_WIDTH
 $o-mail-Chatter-mobile-gap: 2% !default;
 $o-mail-sidebar-icon-opacity: 0.7 !default;
 $o-mail-Discuss-inspector: 250px !default;

addons/mail/static/src/web/chat_window/chat_window_service.js

@@ -7,7 +7,7 @@ import { registry } from "@web/core/registry";
 
 export const CHAT_WINDOW_END_GAP_WIDTH = 10; // for a single end, multiply by 2 for left and right together.
 export const CHAT_WINDOW_INBETWEEN_WIDTH = 5;
-export const CHAT_WINDOW_WIDTH = 340;
+export const CHAT_WINDOW_WIDTH = 360; // same value as $o-mail-ChatWindow-width
 export const CHAT_WINDOW_HIDDEN_WIDTH = 55;
 
 export class ChatWindowService {