[FIX] mail: correct responsive UI for attachment cards

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

@@ -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,

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>