[FIX] mail: make chat window take whole height in mobile

Before this commit, chat window take at most 95% of global
height. This is ok in desktop, 5% room allow clicking on
systray menu. In mobile, however, the intend is for chat window
to take whole height.

This commit makes chat window take whole height in mobile, while
preserving the max-height 95% of global height in desktop.

Also fix an issue where chat window were foldable in mobile, when
this feature is desktop-only.

closes odoo/odoo#119058

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

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

@@ -80,11 +80,12 @@ export class ChatWindow extends Component {
     }
 
     get style() {
+        const maxHeight = !this.store.isSmall ? "max-height: 95vh;" : "";
         const textDirection = localization.direction;
         const offsetFrom = textDirection === "rtl" ? "left" : "right";
         const visibleOffset = this.store.isSmall ? 0 : this.props.right;
         const oppositeFrom = offsetFrom === "right" ? "left" : "right";
-        return `${offsetFrom}: ${visibleOffset}px; ${oppositeFrom}: auto`;
+        return `${offsetFrom}: ${visibleOffset}px; ${oppositeFrom}: auto; ${maxHeight}`;
     }
 
     onKeydown(ev) {
@@ -114,6 +115,9 @@ export class ChatWindow extends Component {
     }
 
     toggleFold() {
+        if (this.store.isSmall) {
+            return;
+        }
         if (this.props.chatWindow.hidden) {
             this.chatWindowService.makeVisible(this.props.chatWindow);
         } else {

addons/mail/static/src/web/chat_window/chat_window.scss

@@ -1,5 +1,4 @@
 .o-mail-ChatWindow {
-    max-height: 95vh;
     height: 460px;
     width: $o-mail-ChatWindow-width;
     z-index: 999; // messaging menu is dropdown (1000)

addons/mail/static/src/web/chat_window/chat_window.xml

@@ -7,12 +7,13 @@
         t-att-class="{
                 'w-100 h-100': store.isSmall,
                 'o-folded': props.chatWindow.folded,
-                'position-absolute bottom-0 rounded-top-3 overflow-hidden d-flex flex-column': !props.chatWindow.hidden
+                'position-absolute bottom-0 overflow-hidden d-flex flex-column': !props.chatWindow.hidden,
+                'rounded-top-3': !props.chatWindow.hidden and !store.isSmall,
                 }"
         t-on-keydown.stop="onKeydown"
         tabindex="1"
     >
-        <div class="o-mail-ChatWindow-header d-flex align-items-center cursor-pointer flex-shrink-0" t-on-click="toggleFold">
+        <div class="o-mail-ChatWindow-header d-flex align-items-center flex-shrink-0" t-on-click="toggleFold" t-att-class="{ 'cursor-pointer': !store.isSmall }">
             <div t-if="store.isSmall" class="cursor-pointer d-flex align-items-center h-100 px-3 py-0 me-2" title="Close conversation" t-on-click="() => this.close()">
                 <i class="fa fa-arrow-left"/>
             </div>

addons/mail/static/tests/chat_window/chat_window_tests.js

@@ -976,3 +976,18 @@ QUnit.test("folded chat window should hide member-list and settings buttons", as
     assert.containsOnce($, "div[title='Show Member List']");
     assert.containsOnce($, "div[title='Show Call Settings']");
 });
+
+QUnit.test("Chat window in mobile are not foldable", async (assert) => {
+    const pyEnv = await startServer();
+    pyEnv["mail.channel"].create({
+        channel_member_ids: [[0, 0, { fold_state: "open", partner_id: pyEnv.currentPartnerId }]],
+    });
+    patchUiSize({ size: SIZES.SM });
+    await start();
+    await click("button i[aria-label='Messages']");
+    await click(".o-mail-NotificationItem");
+    assert.containsNone($, ".o-mail-ChatWindow-header.cursor-pointer");
+    click(".o-mail-ChatWindow-header").catch(() => {});
+    await nextAnimationFrame();
+    assert.containsOnce($, ".o-mail-ChatWindow-content"); // content => non-folded
+});