From 42a2a6b74a4aa4aa71c3081f26cbef4107e14d73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Thu, 25 May 2023 13:10:36 +0000
Subject: [PATCH] [FIX] mail: correct responsive UI for attachment cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, attachment cards overflow in chat window
when attachment name is very long.

Text is properly flagged for truncate, but the container had neither
`overflow-auto` or `min-width: 0` to allow flex to shrink below
its content size.

Also add some horizontal spacing in attachment list so the
attachment cards do not have any contact with composer border.

closes odoo/odoo#122583

X-original-commit: 0d0ab2543d8c6a944fb091fa4ac30a19e1924e71
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/src/attachments/attachment_list.xml | 6 +++---
 addons/mail/static/src/core_ui/message.xml             | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/addons/mail/static/src/attachments/attachment_list.xml b/addons/mail/static/src/attachments/attachment_list.xml
index c71a8c35f22..88528ca256e 100644
--- a/addons/mail/static/src/attachments/attachment_list.xml
+++ b/addons/mail/static/src/attachments/attachment_list.xml
@@ -10,7 +10,7 @@
                 'ms-2 ps-4': isInChatWindowAndIsAlignedRight and !env.inComposer,
             }"
         >
-            <div class="d-flex flex-grow-1 flex-wrap" role="menu">
+            <div class="d-flex flex-grow-1 flex-wrap mx-1" role="menu">
                 <div t-foreach="imagesAttachments" t-as="attachment" t-key="attachment.id" t-att-aria-label="attachment.filename"
                     class="o-mail-AttachmentImage d-flex position-relative flex-shrink-0 mw-100 mb-1 me-1"
                     t-att-title="attachment.name"
@@ -43,9 +43,9 @@
                     </div>
                 </div>
             </div>
-            <div class="d-flex flex-grow-1 flex-wrap mt-1">
+            <div class="d-flex flex-grow-1 flex-wrap mt-1 mx-1">
                 <div t-foreach="nonImagesAttachments" t-as="attachment" t-key="attachment.id"
-                    class="o-mail-AttachmentCard d-flex rounded bg-300 mb-1 me-1 mw-100"
+                    class="o-mail-AttachmentCard d-flex rounded bg-300 mb-1 me-1 mw-100 overflow-auto"
                     t-att-class="{
                         'ms-1': isInChatWindowAndIsAlignedRight,
                         'me-1': !isInChatWindowAndIsAlignedRight,
diff --git a/addons/mail/static/src/core_ui/message.xml b/addons/mail/static/src/core_ui/message.xml
index 0e054fc1914..4d262bed023 100644
--- a/addons/mail/static/src/core_ui/message.xml
+++ b/addons/mail/static/src/core_ui/message.xml
@@ -33,7 +33,7 @@
                             </div>
                         </t>
                     </div>
-                    <div class="w-100" t-att-class="{ 'flex-grow-1': message.composer }">
+                    <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">
                             <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>