[IMP] mail: fix chat header's close button on mobile

While being logged in on mobile and having a chat window open in the
frontend, the buttons to close the chat window and to go to
the backend — both located on the top-left side of the screen — overlap,
making it impossible to close the chat window.

To solve this issue we've removed the chat window's `.fa-arrow-left`
and replaced it with the `.fa-close` icon on the right which is the
design we already have on desktop. Padding had been removed around
the close button on mobile and has been put back.

task-3120032

closes odoo/odoo#126889

X-original-commit: 870fcceab0c4142035d257b7b6fe6e7fcbf2a372
Related: odoo/enterprise#43485
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core/common/chat_window.xml

@@ -14,9 +14,6 @@
         tabindex="1"
     >
         <div class="o-mail-ChatWindow-header d-flex align-items-center flex-shrink-0 bg-100" t-on-click="onClickHeader" t-att-class="{ 'cursor-pointer': !ui.isSmall, 'border-bottom': !props.chatWindow.folded }">
-            <div t-if="ui.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="oi oi-arrow-left"/>
-            </div>
             <t t-if="threadActions.actions.length > 3">
                 <Dropdown position="'bottom-start'" onStateChanged="state => this.onActionsMenuStateChanged(state)" togglerClass="`o-mail-ChatWindow-command d-flex btn align-items-center text-truncate p-0 p-1 ${ !ui.isSmall ? 'ms-2' : '' }`" menuClass="'d-flex flex-column py-0'" class="'d-flex text-truncate'" disabled="state.editingName" title="actionsMenuTitleText">
                     <t t-set-slot="toggler">
@@ -75,7 +72,7 @@
 </t>
 
 <t t-name="mail.ChatWindow.headerContent" owl="1">
-    <div t-if="thread" class="o-mail-ChatWindow-threadAvatar my-0" t-attf-class="{{ ui.isSmall or threadActions.actions.length > 4 ? 'ms-1' : 'ms-3' }} me-1">
+    <div t-if="thread" class="o-mail-ChatWindow-threadAvatar my-0" t-attf-class="{{ threadActions.actions.length > 4 ? 'ms-1' : 'ms-3' }} me-1">
         <img class="rounded" t-att-src="thread.imgUrl" alt="Thread Image"/>
     </div>
     <ThreadIcon t-if="thread and thread.type === 'chat' and thread.correspondent" thread="thread"/>