From 6fe11731073ee5bc2968c844d7266c9d500585c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Theys?= <seb@odoo.com>
Date: Wed, 14 Jul 2021 10:11:45 +0000
Subject: [PATCH] [IMP] mail: prevent partner name from overflowing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some of them were completely missing (eg. author name on message, followers
menu), others were only partially done (eg. missing no wrap).

Adapt all of them to guideline with class.

closes odoo/odoo#73660

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../src/components/attachment/attachment.scss      |  6 ------
 .../src/components/attachment/attachment.xml       |  4 ++--
 .../attachment_viewer/attachment_viewer.scss       |  6 ------
 .../attachment_viewer/attachment_viewer.xml        |  2 +-
 .../chat_window_header/chat_window_header.scss     |  3 ---
 .../chat_window_header/chat_window_header.xml      |  2 +-
 .../chat_window_hidden_menu.scss                   |  2 --
 .../chat_window_hidden_menu.xml                    |  2 +-
 .../static/src/components/composer/composer.scss   |  2 --
 .../static/src/components/composer/composer.xml    |  2 +-
 .../composer_suggestion/composer_suggestion.scss   |  4 ----
 .../composer_suggestion/composer_suggestion.xml    | 14 +++++++-------
 .../composer_text_input/composer_text_input.scss   |  4 +---
 .../static/src/components/follower/follower.scss   |  1 +
 .../static/src/components/follower/follower.xml    |  4 ++--
 .../follower_list_menu/follower_list_menu.scss     |  7 ++++++-
 .../mail/static/src/components/message/message.xml |  6 +++---
 .../notification_group/notification_group.xml      |  4 ++--
 .../notification_list/notification_list_item.scss  |  8 --------
 .../notification_request/notification_request.xml  |  4 ++--
 .../thread_needaction_preview.xml                  |  4 ++--
 .../components/thread_preview/thread_preview.xml   |  4 ++--
 .../thread_textual_typing_status.xml               |  2 +-
 23 files changed, 35 insertions(+), 62 deletions(-)

diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss
index fdb59dcf474..a150a484898 100644
--- a/addons/mail/static/src/components/attachment/attachment.scss
+++ b/addons/mail/static/src/components/attachment/attachment.scss
@@ -59,12 +59,6 @@
     padding-right : map-get($spacers, 1);
 }
 
-.o_Attachment_filename {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 .o_Attachment_image {
     flex-shrink: 0;
     margin: map-get($spacers, 1);
diff --git a/addons/mail/static/src/components/attachment/attachment.xml b/addons/mail/static/src/components/attachment/attachment.xml
index af543ce44a5..97ad38b3fce 100644
--- a/addons/mail/static/src/components/attachment/attachment.xml
+++ b/addons/mail/static/src/components/attachment/attachment.xml
@@ -27,7 +27,7 @@
                         <div class="o_Attachment_imageOverlay">
                             <div class="o_Attachment_details o_Attachment_imageOverlayDetails">
                                 <t t-if="props.showFilename">
-                                    <div class="o_Attachment_filename">
+                                    <div class="o_Attachment_filename text-truncate">
                                         <t t-esc="attachment.displayName"/>
                                     </div>
                                 </t>
@@ -62,7 +62,7 @@
                 <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'card'">
                     <div class="o_Attachment_details">
                         <t t-if="props.showFilename">
-                            <div class="o_Attachment_filename">
+                            <div class="o_Attachment_filename text-truncate">
                                 <t t-esc="attachment.displayName"/>
                             </div>
                         </t>
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
index ea4b02a5c9f..a6c091fab2f 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -88,12 +88,6 @@
     min-width: 0;
 }
 
-.o_AttachmentViewer_nameText {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
 .o_AttachmentViewer_toolbar {
     position: absolute;
     bottom: 45px;
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index e3c5ef1f312..5e239fe0523 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -21,7 +21,7 @@
                     </div>
                 </t>
                 <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name">
-                    <span class="o_AttachmentViewer_nameText" t-esc="attachmentViewer.attachment.displayName"/>
+                    <span class="o_AttachmentViewer_nameText text-truncate" t-esc="attachmentViewer.attachment.displayName"/>
                 </div>
                 <div class="o-autogrow"/>
                 <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton" t-on-click="_onClickDownload" role="button" title="Download">
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
index 6ca4c8b2f42..a7b591f2b0d 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -49,9 +49,6 @@
 
 .o_ChatWindowHeader_name {
     max-height: map-get($sizes, 100);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .o_ChatWindowHeader_rightArea {
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index c07a2f41208..e4fa3dcf750 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -15,7 +15,7 @@
                         threadLocalId="chatWindow.thread.localId"
                     />
                 </t>
-                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name" t-att-title="chatWindow.name">
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name text-truncate" t-att-title="chatWindow.name">
                     <t t-esc="chatWindow.name"/>
                 </div>
                 <t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
index 5125e0da015..1409623bf03 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
@@ -49,8 +49,6 @@
 }
 
 .o_ChatWindowHiddenMenu_windowCounter {
-    overflow: hidden;
-    text-overflow: ellipsis;
     margin-left: map-get($spacers, 1);
 }
 
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
index 943fc71d09d..ef915288a19 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
@@ -5,7 +5,7 @@
         <div class="dropup o_ChatWindowHiddenMenu">
             <div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: env.messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
                 <div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/>
-                <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter">
+                <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter text-truncate">
                     <t t-esc="env.messaging.chatWindowManager.allOrderedHidden.length"/>
                 </div>
             </div>
diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss
index 798943c261d..5070b2f2625 100644
--- a/addons/mail/static/src/components/composer/composer.scss
+++ b/addons/mail/static/src/components/composer/composer.scss
@@ -126,8 +126,6 @@
 
 .o_Composer_threadTextualTypingStatus {
     font-size: $font-size-sm;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
     &:before {
         // invisible character so that typing status bar has constant height, regardless of text content.
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index f7155a58712..90758f887d0 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -26,7 +26,7 @@
                     t-ref="fileUploader"
                 />
                 <t t-if="hasHeader">
-                    <div class="o_Composer_coreHeader">
+                    <div class="o_Composer_coreHeader text-truncate">
                         <t t-if="props.hasThreadName and composer.thread">
                             <span class="o_Composer_threadName">
                                 on: <b><t t-esc="composer.thread.displayName"/></b>
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
index 4e474355600..f0a908672e4 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
@@ -13,16 +13,12 @@
     // because no shrink, ensure it cannot overflow with a max-width
     flex: 0 0 auto;
     max-width: map-get($sizes, 100);
-    overflow: hidden;
     padding-inline-end: map-get($spacers, 2);
-    text-overflow: ellipsis;
 }
 
 .o_ComposerSuggestion_part2 {
     // shrink part 2 to properly ensure it cannot overflow
     flex: 0 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .o_ComposerSuggestion_partnerImStatusIcon {
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
index db90d379946..bf66b574bca 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
@@ -5,15 +5,15 @@
         <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="title()" role="menuitem" t-on-click="_onClick">
             <t t-if="record">
                 <t t-if="isCannedResponse">
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.source"/></span>
-                    <span class="o_ComposerSuggestion_part2"><t t-esc="record.substitution"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.source"/></span>
+                    <span class="o_ComposerSuggestion_part2 text-truncate"><t t-esc="record.substitution"/></span>
                 </t>
                 <t t-if="isChannel">
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.name"/></span>
                 </t>
                 <t t-if="isCommand">
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
-                    <span class="o_ComposerSuggestion_part2"><t t-esc="record.help"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.name"/></span>
+                    <span class="o_ComposerSuggestion_part2 text-truncate"><t t-esc="record.help"/></span>
                 </t>
                 <t t-if="isPartner">
                     <PartnerImStatusIcon
@@ -21,9 +21,9 @@
                         hasBackground="false"
                         partnerLocalId="record.localId"
                     />
-                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.nameOrDisplayName"/></span>
+                    <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.nameOrDisplayName"/></span>
                     <t t-if="record.email">
-                        <span class="o_ComposerSuggestion_part2">(<t t-esc="record.email"/>)</span>
+                        <span class="o_ComposerSuggestion_part2 text-truncate">(<t t-esc="record.email"/>)</span>
                     </t>
                 </t>
             </t>
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
index e821065ba5b..066364847bc 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
@@ -23,9 +23,7 @@
     overflow: auto;
 
     &::placeholder {
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
+        @include text-truncate();
     }
 
     &.o-composer-is-compact {
diff --git a/addons/mail/static/src/components/follower/follower.scss b/addons/mail/static/src/components/follower/follower.scss
index 509a119fb61..2207fd58789 100644
--- a/addons/mail/static/src/components/follower/follower.scss
+++ b/addons/mail/static/src/components/follower/follower.scss
@@ -19,6 +19,7 @@
     align-items: center;
     display: flex;
     flex: 1;
+    min-width: 0;
     padding-left: map-get($spacers, 3);
     padding-right: map-get($spacers, 3);
 }
diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml
index f82722cf870..5036e56fabc 100644
--- a/addons/mail/static/src/components/follower/follower.xml
+++ b/addons/mail/static/src/components/follower/follower.xml
@@ -4,9 +4,9 @@
     <t t-name="mail.Follower" owl="1">
         <div class="o_Follower">
             <t t-if="follower">
-                <a class="o_Follower_details" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
+                <a class="o_Follower_details d-flex" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
                     <img class="o_Follower_avatar" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
-                    <span class="o_Follower_name" t-esc="follower.name or follower.displayName"/>
+                    <span class="o_Follower_name flex-shrink text-truncate" t-esc="follower.name or follower.displayName"/>
                 </a>
                 <t t-if="follower.isEditable">
                     <button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit">
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
index 84d7fd03906..1b87f269f5f 100644
--- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
@@ -15,7 +15,12 @@
 .o_FollowerListMenu_dropdown {
     display: flex;
     flex-flow: column;
-    overflow-y: auto;
+    /**
+     * Note: Min() refers to CSS min() and not SCSS min().
+     *
+     * To by-pass SCSS min() shadowing CSS min(), we rely on SCSS being case-sensitive while CSS isn't.
+     */
+    max-width: Min(400px, 95vw);
 }
 
 .o_FollowerListMenu_followers {
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 2c8cb4fc31a..f8c916a9d97 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -63,17 +63,17 @@
                     <t t-if="!props.isSquashed">
                         <div class="o_Message_header">
                             <t t-if="message.author">
-                                <div class="o_Message_authorName o_Message_authorRedirect o_redirect" t-on-click="_onClickAuthorName" title="Open profile">
+                                <div class="o_Message_authorName o_Message_authorRedirect o_redirect text-truncate" t-on-click="_onClickAuthorName" title="Open profile">
                                     <t t-esc="message.author.nameOrDisplayName"/>
                                 </div>
                             </t>
                             <t t-elif="message.email_from">
-                                <a class="o_Message_authorName" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}">
+                                <a class="o_Message_authorName text-truncate" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}">
                                     <t t-esc="message.email_from"/>
                                 </a>
                             </t>
                             <t t-else="">
-                                <div class="o_Message_authorName">
+                                <div class="o_Message_authorName text-truncate">
                                     Anonymous
                                 </div>
                             </t>
diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml
index c9f41c79734..51a7c92efac 100644
--- a/addons/mail/static/src/components/notification_group/notification_group.xml
+++ b/addons/mail/static/src/components/notification_group/notification_group.xml
@@ -11,7 +11,7 @@
                 </div>
                 <div class="o_NotificationGroup_content">
                     <div class="o_NotificationGroup_header">
-                        <span class="o_NotificationGroup_name">
+                        <span class="o_NotificationGroup_name text-truncate">
                             <t t-esc="group.res_model_name"/>
                         </span>
                         <span class="o_NotificationGroup_counter">
@@ -25,7 +25,7 @@
                         </t>
                     </div>
                     <div class="o_NotificationGroup_core">
-                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText">
+                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText text-truncate">
                             <t t-if="group.notification_type === 'email'">
                                 An error occurred when sending an email.
                             </t>
diff --git a/addons/mail/static/src/components/notification_list/notification_list_item.scss b/addons/mail/static/src/components/notification_list/notification_list_item.scss
index 9140800ef86..ead2c8b11c2 100644
--- a/addons/mail/static/src/components/notification_list/notification_list_item.scss
+++ b/addons/mail/static/src/components/notification_list/notification_list_item.scss
@@ -63,10 +63,6 @@
 }
 
 @mixin o-mail-notification-list-item-inline-text-layout {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
     &.o-empty::before {
         content: '\00a0'; // keep line-height as if it had content
     }
@@ -78,10 +74,6 @@
 }
 
 @mixin o-mail-notification-list-item-name-layout {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
     &.o-mobile {
         font-size: 1.1em;
     }
diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml
index f59c671a723..ace53cbcf5f 100644
--- a/addons/mail/static/src/components/notification_request/notification_request.xml
+++ b/addons/mail/static/src/components/notification_request/notification_request.xml
@@ -15,12 +15,12 @@
             </div>
             <div class="o_NotificationRequest_content">
                 <div class="o_NotificationRequest_header">
-                    <span class="o_NotificationRequest_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                    <span class="o_NotificationRequest_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
                         <t t-esc="getHeaderText()"/>
                     </span>
                 </div>
                 <div class="o_NotificationRequest_core">
-                    <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText">
+                    <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText text-truncate">
                         Enable desktop notifications to chat.
                     </span>
                 </div>
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
index ea8c1bcf1d1..a77da68b617 100644
--- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -24,7 +24,7 @@
                 </div>
                 <div class="o_ThreadNeedactionPreview_content">
                     <div class="o_ThreadNeedactionPreview_header">
-                        <span class="o_ThreadNeedactionPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                        <span class="o_ThreadNeedactionPreview_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
                             <t t-esc="thread.displayName"/>
                         </span>
                         <span class="o_ThreadNeedactionPreview_counter">
@@ -38,7 +38,7 @@
                         </t>
                     </div>
                     <div class="o_ThreadNeedactionPreview_core">
-                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
+                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
                             <t t-if="thread.lastNeedactionMessageAsOriginThread and thread.lastNeedactionMessageAsOriginThread.author">
                                 <MessageAuthorPrefix
                                     messageLocalId="thread.lastNeedactionMessageAsOriginThread.localId"
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index 1ca993574f0..ec033843a3b 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -25,7 +25,7 @@
                 </div>
                 <div class="o_ThreadPreview_content">
                     <div class="o_ThreadPreview_header">
-                        <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
+                        <span class="o_ThreadPreview_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
                             <t t-esc="thread.displayName"/>
                         </span>
                         <t t-if="thread.localMessageUnreadCounter > 0">
@@ -41,7 +41,7 @@
                         </t>
                     </div>
                     <div class="o_ThreadPreview_core">
-                        <span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
+                        <span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
                             <t t-if="thread.lastMessage and thread.lastMessage.author">
                                 <MessageAuthorPrefix
                                     messageLocalId="thread.lastMessage.localId"
diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
index 722d07389f8..d0e33e0f35d 100644
--- a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
+++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
@@ -6,7 +6,7 @@
             <t t-if="thread and thread.orderedOtherTypingMembers.length > 0">
                 <ThreadTypingIcon animation="'pulse'" size="'medium'"/>
                 <span class="o_ThreadTextualTypingStatus_separator"/>
-                <span t-esc="thread.typingStatusText"/>
+                <span class="text-truncate" t-esc="thread.typingStatusText"/>
             </t>
         </div>
     </t>